How to close Angular-ui modal from other controller

Question

I am using Angular-ui to pop up a modal with a form in it. My code is:

app.controller('NewCaseModalCtrl', ['$http', '$scope','$modal', function ($http, $scope, $modal, $log) {

  $scope.items = ['item1', 'item2', 'item3'];
  $scope.open = function (size) {

    var modalInstance = $modal.open({
      templateUrl: 'modal-new-case.html',
      controller: 'ModalInstanceCtrl',
      size: size,
      resolve: {
        items: function () {
          return $scope.items;
        }
      }
    });

    modalInstance.result.then(function (selectedItem) {
      $scope.selected = selectedItem;
    }, function () {
    });
  };
}]);

And then I have another controller that is inside the modal-new-case.html template, and I want it to run an httpd request and then close that modal, here is that code:

    app.controller('CreateCaseFormCtrl', ['$http','$scope', function($http,$scope) {
    $scope.formData = {};
    $scope.processForm = function() {

        $http.post('http://api.com/proj', $scope.formData).
        success(function(data, status, headers, config) {
            console.log("success " + data.id);
        }).
        error(function(data, status, headers, config) {
            console.log("Error " + status + data);
        });
    };

}]);

Okay so inside my modal-new-case.html template, which is loaded when I do:

ng-controller="NewCaseModalCtrl"

I have this HTML:

<div ng-controller="CreateCaseFormCtrl">
    <form ng-submit="processForm()">
                <button class="btn btn-primary" ng-click="processForm()" >OK</button>
                <button class="btn" ng-click="cancel()">Cancel</button>
    </form>
</div>

So if you see, what I really want to do is to run that processForm() function, and when it returns with a success, I want to THEN call the function that will close the modal, which I believe "cancel()" would be fine.

But I don't know how to refer to it from the CreateCaseFormCtrl controller.

I appreciate any thoughts and help, and I would like to add that I am very unsophisticated when it comes to Angular, so if this is complicated, please remember that maybe I am not 100% clear on what every single thing in Angular is such as the factories and such. I guess I'm saying I'm very happy with a dirty solution that's fairly simple, since this isn't going to be long-term production programming code.

Does your html `modal-new-case.html` start with `
` ? if so why dont you just provide modal controller as `CreateCaseFormCtrl` and inject `$modalInstance` and use its `close(data)` method. — PSL, Jan 09 '15 at 02:37

score 6 · Accepted Answer · answered Jan 09 '15 at 02:31

Step 1: remove the

ng-controller="CreateCaseFormCtrl"

from

<div ng-controller="CreateCaseFormCtrl">
    <form ng-submit="processForm()">
                <button class="btn btn-primary" ng-click="processForm()" >OK</button>
                <button class="btn" ng-click="cancel()">Cancel</button>
    </form>
</div>

Step 2: Change

controller: 'ModalInstanceCtrl',   =>   controller: 'CreateCaseFormCtrl'

in

var modalInstance = $modal.open({
  templateUrl: 'modal-new-case.html',
  controller: 'CreateCaseFormCtrl', //Add here
  size: size,
  resolve: {
    items: function () {
      return $scope.items;
    }
  }
});

Step 3: In CreateCaseFormCtrl add a service called $modalInstance

app.controller('CreateCaseFormCtrl', ['$http','$scope', '$modalInstance', function($http,$scope, $modalInstance) {

Step 4: Add the close and ok functions

$scope.cancel = function () {
    $modalInstance.dismiss();
};

and $modalInstance.close(); in

$http.post('http://api.com/proj', $scope.formData).
    success(function(data, status, headers, config) {
        console.log("success " + data.id);
        $modalInstance.close(); //add here
    }).
    error(function(data, status, headers, config) {
        console.log("Error " + status + data);
    });

This works great thanks! The only thing I'm not sure on is where the close and ok functions you mention in Step 4 go? Because when I stick the cancel() one in CreateCaseFormCtrl, it doesn't do anything when I click the cancel button. Same problem if I put it in the main area of NewCaseModalCtrl — Cocorico, Jan 09 '15 at 15:49
They need to be in the controller mentioned in step two because this is the controller which controls the modal. If you want to control this modal from outside its ui you need to use a broadcast/on — yangli-io, Jan 09 '15 at 20:48

huan feng · Answer 2 · 2015-01-09T04:06:20.570

2

use $modalInstance.dismiss API

in NewCaseModalCtrl:

controller('NewCaseModalCtrl', ['$scope', '$modalInstance', function ($scope, $modalInstance,

    ...

        $modalInstance.close(data);

edited Jan 09 '15 at 04:06

answered Jan 09 '15 at 02:34

huan feng

7,307
2
32
56

1

You may also want to mention to use `close(data)` otherwise it won't resolve the promise which OP has chained through in the parent controller `modalInstance.result.then`. If you use dismiss it will go to catch block and did you mean `CreateCaseFormCtrl` ? – PSL Jan 09 '15 at 02:40
Thanks for @PSL comments, you are correct, we should use close method. – huan feng Jan 09 '15 at 04:07
Better explaination about difference between dismiss and close:http://stackoverflow.com/questions/19743299/what-is-the-difference-between-dismiss-a-modal-and-close-a-modal-in-angular – huan feng Jan 09 '15 at 04:12

score 0 · Answer 3 · answered Jan 02 '18 at 19:25

You an do it globally like this or from other controllers too:

 //hide any open $mdDialog modals
  angular.element('.modal-dialog').hide();
  //hide any open bootstrap modals
  angular.element('.inmodal').hide();
  //hide any sweet alert modals
  angular.element('.sweet-alert').hide();

How to close Angular-ui modal from other controller

3 Answers3