尝试关闭一个简单的 angular 模式会导致：无法读取未定义的 属性 'dismiss'

Question

我试图在用户单击我的演示应用程序中仍在构建的内容时显示一个简单的模式。

一切正常，直到我希望用户单击模式上的 'Close' 按钮。当他们这样做时，他们会得到：

TypeError: Cannot read property 'dismiss' of undefined

这是我的主控制器：

    $scope.underConstruction = function () {
    var modalInstance = $modal.open({
        templateUrl: 'app/shared/underconstruction.html',
        controller: 'ModalInstanceCtrl',
        size: 'sm',
        resolve: {
            '$modalInstance': function () { return function () { return modalInstance; } }
        }
    });
    console.log('modal opened');
    modalInstance.result.then(function (response) {
        $scope.selected = response;
        console.log(response);
    }, function () {
        console.log('Modal dismissed at: ' + new Date());
    });
};

然后在我的 ModalInstanceCtrl 中我有：

app.controller('ModalInstanceCtrl', ['$scope', '$modal', function ($scope, $modal, $modalInstance) {
$scope.cancel = function () {
    $modalInstance.dismiss('cancel');
};
}]);

我使用的是angular-ui版本0.12.0，angularjs版本v1.3.11

命中close()方法，则抛出上述错误。

我查看了各种结果和问题，并看到了对错误和其他问题的引用，但用例比我的更复杂——我的模式只显示一些文本和一个关闭按钮。例如，我 found an answer that says:

$modalInstance is made available for injection in the controller by AngularUI Bootstrap implementation. So, we don't need any effort ro "resolve" or make it available somehow.

Answer 1

我能够简化事情：

$scope.underConstruction = function () {
    var modalInstance = $modal.open({
        templateUrl: 'app/shared/underconstruction.html'
    });
    console.log('modal opened');
};

然后在我的模态模板中：

  <button class="btn btn-primary" ng-click="$dismiss('cancel')">Close this message</button>

根据文档：

In addition the scope associated with modal's content is augmented with 2 methods:

$close(result)

$dismiss(reason)

Those methods make it easy to close a modal window without a need to create a > dedicated controller.

我之前确实尝试过这个，但我猜是其他东西在干扰，或者我没有清除缓存。

Answer 2

您故意 "defined" 您的 $modalInstance 参数作为 undefined，而不是在您声明 ModalInstanceCtrl 控制器的内联注释数组中将其声明为依赖项。

应该是：

['$scope', '$modal', '$modalInstance', function($scope, $modal, $modalInstance){ ... }]

“我们不需要任何努力...”部分并不意味着您不必将其指定为依赖项。

Answer 3

对我有用

if(typeof(alert/popover)!="undefined"){
    await alert/popover.dismiss();
  }