CODEWITHSUNDEEP
javascriptangularjsangular-bootstrap
David B
David B

Reputation: 929

angular bootstrap ui modals

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,

Upvotes: 0

Views: 53

Answers (1)

quirimmo
quirimmo

Reputation: 9988

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

Upvotes: 1

Related Questions