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

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

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

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

Answer 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组件的一部分，希望知识可以帮助您搜索将来需要的更多信息

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

关闭模态的方法。

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

3 个答案: