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

【问题标题】：How to close Angular-ui modal from other controller如何从其他控制器关闭 Angular-ui 模态
【发布时间】：2015-03-07 07:39:59
【问题描述】：

我正在使用 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 () {
    });
  };
}]);

然后我在 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);
        });
    };

}]);

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

ng-controller="NewCaseModalCtrl"

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

因此，如果您看到，我真正想做的是运行该 processForm() 函数，当它成功返回时，我想然后调用将关闭模态的函数，我相信“取消（ )”就好了。

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

感谢任何想法和帮助，我想补充一点，我对 Angular 非常不成熟，所以如果这很复杂，请记住，也许我不是 100% 清楚 Angular 中的每一件事比如工厂之类的。我想我是说我对一个相当简单的肮脏解决方案感到非常满意，因为这不会是长期的生产编程代码。

【问题讨论】：

您的 html modal-new-case.html 是否以 <div ng-controller="CreateCaseFormCtrl"> 开头？如果是这样，为什么不将模态控制器提供为CreateCaseFormCtrl 并注入$modalInstance 并使用其close(data) 方法。

标签： javascript angularjs angular-ui angular-ui-bootstrap

【解决方案1】：

第 1 步：删除

ng-controller="CreateCaseFormCtrl"

来自

<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>

第二步：改变

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

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

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

第 4 步：添加 close 和 ok 函数

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

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

【讨论】：

这很好用，谢谢！我唯一不确定的是您在第 4 步中提到的 close 和 ok 功能在哪里？因为当我将 cancel() 粘贴在 CreateCaseFormCtrl 中时，当我单击取消按钮时它不会执行任何操作。如果我把它放在 NewCaseModalCtrl 的主要区域，同样的问题
它们需要在第二步提到的控制器中，因为这是控制模态的控制器。如果你想从它的用户界面之外控制这个模式，你需要使用广播/on

【解决方案2】：

使用 $modalInstance.dismiss API

在 NewCaseModalCtrl 中：

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

    ...

        $modalInstance.close(data);

【讨论】：

您可能还想提及使用close(data)，否则它将无法解决OP 在父控制器modalInstance.result.then 中链接的承诺。如果你使用dismiss，它会去catch block，你的意思是CreateCaseFormCtrl？
感谢@PSL cmets，你说得对，我们应该使用close方法。
更好地解释驳回和关闭之间的区别：stackoverflow.com/questions/19743299/…

【解决方案3】：

您可以像这样在全局范围内执行此操作，也可以从其他控制器执行此操作：

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

【讨论】：