How to close Angular -ui modal from another controller

Question

I use Angular -ui to display modality with a form. 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 launch the httpd request and then close this modal code, here is this 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); }); }; 

}]);

So, inside my modal-new-case.html template, which loads 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 run this function processForm (), and when it returns with success, I want THEN to call a function that closes the modal, which I believe cancels () " it would be nice.

But I do not know how to access it using 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 it is difficult, remember that maybe I do not 100% understand that every thing in Angular is such as factories, etc. I think I say that I am very pleased with the dirty solution, which is quite simple, since it will not be a long-term production code.

Answer 1

Step 1: Uninstall

 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 close functions and ok

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

Answer 2

use the $ modalInstance.dismiss API

in NewCaseModalCtrl:

 controller('NewCaseModalCtrl', ['$scope', '$modalInstance', function ($scope, $modalInstance, ... $modalInstance.close(data); 

Answer 3

You do this 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();