Question

在这个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();
        };

})

Answer 1

在第一种情况下，您要将rendered承诺分配给$scopemodalInstance，而不是实例。如果您执行类似（Plunk）的操作：

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

关闭按钮在Angular UI模式

1 个答案: