适用于任何实例的AngularUI Bootstrap模态关闭事件

时间:2015-12-31 12:39:24

标签: angularjs angular-ui-bootstrap

我正在使用UI Bootstrap AngularUI,我需要在关闭任何模态时调用一个函数。 我知道当一个特定的模态实例像这样关闭时我可以调用一个函数:

modalInstance.result.finally(function(){
    console.log('Modal closed');
});

在jQuery中,我会为任何实例执行类似的操作:

$(document).on('hidden.bs.modal', function () {
    console.log('Modal closed');
});

但是如何用AngularJS实现呢?

1 个答案:

答案 0 :(得分:3)

你可以这样做:

myApp.controller('ModalCtrl', ['$scope', '$modal', function($scope, $modal) {
    $scope.open = function() {
        var modalInstance = $modal.open({
            templateUrl: 'modal.html',
            controller: 'ModalInstanceCtrl',
            resolve: {
                params: function() {
                    return {
                        key: 'value',
                        key2: 'value2'
                    };
                }
            }
        });
        modalInstance.result.then(
            function(result) {
                console.log('called $modalInstance.close()');
                alert(result);
            },
            function(result) {
                console.log('called $modalInstance.dismiss()');
                alert(result);
            }
        );
    };
}])

你可以从controller获得一些东西。

myApp.controller('ModalInstanceCtrl', ['$scope', '$modalInstance', 'params', function ($scope, $modalInstance, params) {
    console.log(params);

    $scope.ok = function () {
        $modalInstance.close('this is result for close');
    };

    $scope.cancel = function () {
        $modalInstance.dismiss('this is result for dismiss');
    };
}]);

找到一个巧妙的小提琴: http://jsfiddle.net/wjohtz0y/