关闭按钮在 Angular UI Modal 中不起作用答案

【问题标题】：Close button doesn't work in Angular UI Modal关闭按钮在 Angular UI Modal 中不起作用
【发布时间】：2017-10-17 23:22:24
【问题描述】：

在这个PLUNK 中，我有一个Angular UI 模式和一个关闭它的按钮。该按钮不起作用，因为 Modal 实例没有 close 方法。

如果您删除 rendered 语句，该按钮将起作用。为什么它不适用于rendered？

这不起作用：

var app = angular.module('app', ['ui.bootstrap']);

app.controller('myCtl', function($scope,$uibModal) {

        $scope.openModal = function() {
          $scope.modalInstance = $uibModal.open({
              templateUrl: 'myModalContent.html',
              scope: $scope
            }).rendered.then(function() {
                 alert("modal rendered")
            }); 
        };

        $scope.close = function () {
            $scope.modalInstance.close();
        };

})

这确实有效（请参阅PLUNK）：

var app = angular.module('app', ['ui.bootstrap']);

app.controller('myCtl', function($scope,$uibModal) {

        $scope.openModal = function() {
          $scope.modalInstance = $uibModal.open({
              templateUrl: 'myModalContent.html',
              scope: $scope
            }); 
        };

        $scope.close = function () {
            $scope.modalInstance.close();
        };

})

【问题讨论】：

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

【解决方案1】：

在第一种情况下，您将rendered 承诺分配给$scopemodalInstance，而不是实例。如果您执行类似 (Plunk) 之类的操作，它会起作用：

$scope.modalInstance = $uibModal.open({
    templateUrl: 'myModalContent.html',
    scope: $scope
});
$scope.modalInstance.rendered.then(function() {
    alert("modal rendered")
});

【讨论】：