关闭按钮在 Angular UI 模式下不起作用

Question

在这个 PLUNK 中，我有一个 Angular UI 模式和一个关闭它的按钮。该按钮不起作用，因为模态实例没有 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();
        };

})

Answer 1

在第一种情况下，您将 rendered 承诺分配给 $scopemodalInstance，而不是实例。如果您执行类似 (Plunk):

的操作，它会起作用

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