从不同的控制器关闭 Angular 模态

Question

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

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

Answer 1

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

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

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

modalInstance .close()

关闭模式的方法。

Answer 2

您需要将依赖项 $uibModalInstance 注入模态框的控制器。

然后您可以使用 $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 组件的一部分，希望这些知识有助于搜索您需要的更多信息未来。

Answer 3

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

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

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

从不同的控制器关闭 Angular 模态

Close Angular modal from different controller

javascript

angularjs

bootstrap-ui