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 <div ng-controller="CreateCaseFormCtrl"> ? if so why dont you just provide modal controller as CreateCaseFormCtrl and inject $modalInstance and use its close(data) method. — PSL
– PSL, Commented Jan 9, 2015 at 2:37

yangli-io · Accepted Answer · 2015-01-09 02:31:29Z

6

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

answered Jan 9, 2015 at 2:31

yangli-io

17.4k8 gold badges43 silver badges50 bronze badges

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

2 Comments

Cocorico Over a year ago

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

yangli-io Over a year ago

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

huan feng · Accepted Answer · 2015-01-09 04:06:20Z

2

use $modalInstance.dismiss API

in NewCaseModalCtrl:

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

    ...

        $modalInstance.close(data);

edited Jan 9, 2015 at 4:06

answered Jan 9, 2015 at 2:34

huan feng

8,7043 gold badges40 silver badges66 bronze badges

3 Comments

PSL Over a year ago

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 ?

huan feng Over a year ago

Thanks for @PSL comments, you are correct, we should use close method.

huan feng Over a year ago

Better explaination about difference between dismiss and close:stackoverflow.com/questions/19743299/…

hakuna · Accepted Answer · 2018-01-02 19:25:16Z

0

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();

answered Jan 2, 2018 at 19:25

hakuna

6,74111 gold badges57 silver badges79 bronze badges

Collectives™ on Stack Overflow

How to close Angular-ui modal from other controller

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related