对于任何instace, AngularUI引导模式关闭事件

时间:2021-12-17 19:38:52

I am using UI Bootstrap AngularUI and I need to call a function when any modal is closed. I know that I can call a function when a specific modal instance closes like this:

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

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

In jQuery I would do something like this for ANY instance:

在jQuery中,我可以为任何实例做这样的事情:

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

But how to achieve that with AngularJS?

但是如何用AngularJS实现这个目标呢?

1 个解决方案

#1


3  

You could do something like this:

你可以这样做:

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);
            }
        );
    };
}])

And something you could from your 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');
    };
}]);

Found a neat fiddle over this: http://jsfiddle.net/wjohtz0y/

在上面找到了一个简单的东西:http://jsfiddle.net/wjohtz0y/

#1


3  

You could do something like this:

你可以这样做:

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);
            }
        );
    };
}])

And something you could from your 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');
    };
}]);

Found a neat fiddle over this: http://jsfiddle.net/wjohtz0y/

在上面找到了一个简单的东西:http://jsfiddle.net/wjohtz0y/