angular bootstrap ui modals

Question

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,

did you try to setup in the options of the modal the following properties? closeButtonText: 'Close', actionButtonText: 'OK', — quirimmo
– quirimmo, Commented May 22, 2017 at 20:57
@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
– David B, Commented May 22, 2017 at 21:01
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, Commented May 22, 2017 at 21:02
@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
– David B, Commented May 22, 2017 at 21:05

quirimmo · Accepted Answer · 2017-05-22 21:43:34Z

1

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' 
  }) 
};

answered May 22, 2017 at 21:43

quirimmo

10k3 gold badges33 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

angular bootstrap ui modals

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related