从不同的控制器关闭角度模态答案

【问题标题】：Close Angular modal from different controller从不同的控制器关闭角度模态
【发布时间】：2017-06-05 07:51:28
【问题描述】：

我是 Angular 新手（我必须在我以前的同事之后编辑一个项目）。

我已经定义了 FormController 和 ModalController。 ModalController 是这样定义的：

angular.module('app', [...]).controller('ModalController', ['part', class {
    constructor(part) {
       this.part = part;
    }
}]);

在 FormController 中，我有以下代码来打开模式：

openModal(template, part) {
    this.$uibModal.open({
        animation: true,
        templateUrl: template + '.html',
        controller: 'ModalController',
        controllerAs: 'ModalCtrl',
        resolve: {
            part: () => {
                return something;
            }
        }
    });
}

我的问题是关闭模式（点击视图中的按钮后）。

【问题讨论】：

你可以通过 jquery 做到这一点： $("#modalName").modal('hide');
@Jenny 大多数 Angularjs 开发人员在回答 Angularjs 问题时尽量避免建议使用 jQuery。

标签： javascript angularjs bootstrap-ui

【解决方案1】：

您可以通过这种方式将模态实例传递给控制器：

angular.module('app', [...]).controller('ModalController', ['part', '$uibModalInstance', class {
    constructor(part, $uibModalInstance) {
       this.part = part;
    }
}]);

正如Callum 所说，使用$uibModalInstance 的dismiss() 和close() 函数来关闭模态实例。

【讨论】：

【解决方案2】：

您需要将依赖项$uibModalInstance 注入到Modal 的控制器中。

然后您可以使用$dismiss 或$close，如本示例所示，取自UI Bootstrap Docs：

  $ctrl.ok = function () {
    $uibModalInstance.close($ctrl.selected.item);
  };

  $ctrl.cancel = function () {
    $uibModalInstance.dismiss('cancel');
  };

由于您的控制器被实例化为part，您可以使用它并假设您不需要传递结果或原因，您也可以从方法中删除这些参数：

  part.ok = function () {
    $uibModalInstance.close();
  };

  part.cancel = function () {
    $uibModalInstance.dismiss();
  };

如果您看到前缀为 $uib 的东西被使用，这意味着它是 Angular UI Bootstrap 组件的一部分，还请注意，希望这些知识有助于您在未来搜索更多需要的信息。

【讨论】：

我如何将模态实例传递给 ModalController？
你可以通过这种方式将它传递给你的控制器声明angular.module('app', [...]).controller('ModalController', ['part', '$uibModalInstance', class { constructor(part, $uibModalInstance)

【解决方案3】：

您必须将 uib-modal 的实例注入到包含 close 方法的 modal 控制器中。您可以使用它来关闭模式。

openModal(template, part) {
    var modalInstance = $uibModal.open({
        animation: true,
        templateUrl: template + '.html',
        controller: 'ModalController',
        controllerAs: 'ModalCtrl',
        resolve: {
            part: () => {
                return something;
            }
        }
    });
}

将modalInstance注入模态控制器，然后就可以使用了

modalInstance .close()

关闭模式的方法。

【讨论】：