Close Angular modal from different controller

Question

I am new to Angular (I have to edit a project after my former colleague).

I have defined FormController and ModalController. ModalController is defined like this:

angular.module('app', [...]).controller('ModalController', ['part', class {
    constructor(part) {
       this.part = part;
    }
}]);

And in FormController I have following code to open modal:

openModal(template, part) {
    this.$uibModal.open({
        animation: true,
        templateUrl: template + '.html',
        controller: 'ModalController',
        controllerAs: 'ModalCtrl',
        resolve: {
            part: () => {
                return something;
            }
        }
    });
}

My problem is to close modal (after click on button in view).

@Jenny most Angularjs developers try to avoid suggesting using jQuery when answering Angularjs questions. — Claies, Jan 20 '17 at 11:37

score 2 · Answer 1 · edited Jun 07 '20 at 15:28

2

You can pass the modal instance into the controller this way:

angular.module('app', [...]).controller('ModalController', ['part', '$uibModalInstance', class {
    constructor(part, $uibModalInstance) {
       this.part = part;
    }
}]);

And as Callum has put it, use the dismiss() and close() functions of $uibModalInstance to close the modal instance.

edited Jun 07 '20 at 15:28

Amir

1,328
2
13
27

answered Jan 20 '17 at 11:34

Bala Abhinav

1,328
1
9
15

Callum · Accepted Answer · 2017-01-20T10:58:22.057

You will need to inject the dependency $uibModalInstance into the Modal's controller.

Then you can use either $dismiss or $close as shown in this example taken from UI Bootstrap Docs:

  $ctrl.ok = function () {
    $uibModalInstance.close($ctrl.selected.item);
  };

  $ctrl.cancel = function () {
    $uibModalInstance.dismiss('cancel');
  };

Since you controller is instantiated as part you would use that and presuming you don't need to pass a result or reason you can remove those params from the methods too:

  part.ok = function () {
    $uibModalInstance.close();
  };

  part.cancel = function () {
    $uibModalInstance.dismiss();
  };

Also a note if you see something prefixed $uib being used that means it is a part of the Angular UI Bootstrap component, hopefully that knowledge should help with the search for any more info you need in the future.

You can pass it into you controller declaration this way `angular.module('app', [...]).controller('ModalController', ['part', '$uibModalInstance', class { constructor(part, $uibModalInstance)` — Callum, Jan 20 '17 at 11:38

score 0 · Answer 3 · edited Feb 05 '18 at 02:29

You have to inject the instance of uib-modal into the controller of modal which contain the close method. which you can use to close the modal.

openModal(template, part) {
    var modalInstance = $uibModal.open({
        animation: true,
        templateUrl: template + '.html',
        controller: 'ModalController',
        controllerAs: 'ModalCtrl',
        resolve: {
            part: () => {
                return something;
            }
        }
    });
}

Inject modalInstance into the modal controller and then you can use

modalInstance .close()

method to close the modal.

Close Angular modal from different controller

3 Answers3