如何从其他控制器关闭Angular-ui模态

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

我正在使用Angular-ui弹出一个带有表单的模态。我的代码是:

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:

然后我在modal-new-case.html模板中有另一个控制器,我希望它运行一个httpd请求,然后关闭该模块,这是代码:

    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:

好吧,在我的modal-new-case.html模板中,当我这样做时加载:

ng-controller="NewCaseModalCtrl"

I have this HTML:

我有这个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.

所以,如果你看到,我真正想做的是运行processForm()函数,当它成功返回时,我想要调用关闭模态的函数,我相信“cancel()”会没事的。

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

但我不知道如何从CreateCaseFormCtrl控制器中引用它。

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.

我很感激任何想法和帮助,我想补充说,当涉及到Angular时,我非常简单,所以如果这很复杂,请记住,也许我并不是100%清楚Angular中的每一件事都是如此工厂等。我想我说我对一个相当简单的脏解决方案非常满意,因为这不是长期的生产编程代码。

3 个解决方案

#1

Step 1: remove the

第1步:删除

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

第2步:改变

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

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

第3步:在CreateCaseFormCtrl中添加一个名为$ modalInstance的服务

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

Step 4: Add the close and ok functions

第4步:添加close和ok函数

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

and $modalInstance.close(); in

和$ modalInstance.close();在

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

#2

use $modalInstance.dismiss API

使用$ modalInstance.dismiss API

in NewCaseModalCtrl:

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

    ...

        $modalInstance.close(data);

#3

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

#1