angular bootstrap ui modals

0
votes

I asked a question here: Angular Boostrap Modal Service which provides code examples, I need to open a modal from another controller. I have managed to get the modal displaying but I am struggling to hook up the ok, cancel buttons. My code is still the same as within this question. I will require modals to be created from different controllers, but I just cannot work out how it should be setup, I would really appreciate some help with this, I am still new to Angular.

an example of loading the modal in StaffController

$scope.editmodal = function EditModal() {
  var modalInstance = $uibModal.open({
    templateUrl: 'myModalContent.html',
    scope: $scope, //passed current scope to the modal
    size: 'sm',
    closeButtonText: 'Close',
    actionButtonText: 'OK'
  });
};

The code for the modal is inside a controller named: ModalController (This contains the example off here: https://angular-ui.github.io/bootstrap/

Thanks,

1
javascriptangularjsangular-bootstrap
did you try to setup in the options of the modal the following properties? closeButtonText: 'Close', actionButtonText: 'OK', - quirimmo
@quirimmo yes, I have just tried this, and still the cancel buttons do not work. Am I correct in using the modal instance from another controller to display the modal? - David B
you can open modals from all the places you want to. I personally prefer to open them through services and inject the related service inside the controller. So with my code the ok button is working and the cancel one is not working? - quirimmo
@quirimmo the ok & cancel do not work. Please see recent edit to how I load the modal, also please see the link above to a full sample of my code in the previous question. Please could you advise how to adapt so I can use this as a service. Thanks - David B
but they don't work or they don't appear? - quirimmo

1 Answers

1
votes

You were missing the reference to the controller inside your modal declaration, and inside your template you can omit the $ctrl preface, or you can provide a controllerAs property specifying that name for the controller. So your code should be like this one.

HTML:

<button class="btn btn-primary" type="button" ng-click="ok()">OK</button> 
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>

JS:

$scope.editmodal = function EditModal() { 
  var modalInstance = $uibModal.open({ 
    templateUrl: 'myModalContent.html', 
    controller: 'ApiStaffController', 
    size: 'sm' 
  }) 
};