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.

Solution 1

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

Solution 2

use $modalInstance.dismiss API

in NewCaseModalCtrl:

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

    ...

        $modalInstance.close(data);

Comments

[PSL]

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]

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

[huan feng]

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

[Cocorico]

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]

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