单击外部/esc 时，Angularjs Bootstrap 模态结束调用 [英] Angularjs Bootstrap modal closing call when clicking outside/esc

问题描述

我在我的项目中使用 Angular-ui/bootstrap 模态.

I am using the Angular-ui/bootstrap modal in my project.

这是我的模态:

$scope.toggleModal = function () {
    $scope.theModal = $modal.open({
        animation: true,
        templateUrl: 'pages/templates/modal.html',
        size: "sm",
        scope: $scope
    });
}

可以通过单击 ESC 按钮或在模态区域外单击来关闭模态.发生这种情况时，有没有办法运行函数?我不太确定如何捕捉这种关闭.

One is able to close the modal by clicking the ESC button or clicking outside the modal area. Is there a way to run a function when this happens? I am not quite sure how to catch the sort of closing.

我知道我可以通过像这样的 ng-click="closeModal()" 手动关闭模态:

I know that I can manually dismiss a modal by having a ng-click="closeModal()" like this:

$scope.closeModal = function () {
    $scope.theModal.dismiss('cancel');
};

推荐答案

是的，你可以.它会导致一个解雇事件，并且在这种情况下承诺被拒绝.另外，请注意 $modal.open() 方法返回一个对象，该对象具有作为承诺的 result 属性.

Yes you can. It causes a dismiss event and the promise is rejected in that case. Also, note that the $modal.open() method returns an object that has a result property that is a promise.

有了承诺，你可以......

With the promise you can...

//This will run when modal dismisses itself when clicked outside or
//when you explicitly dismiss the modal using .dismiss function.
$scope.theModal.result.catch(function(){
    //Do stuff with respect to dismissal
});

//Runs when modal is closed without being dismissed, i.e when you close it
//via $scope.theModal.close(...);
$scope.theModal.result.then(function(datapassedinwhileclosing){
    //Do stuff with respect to closure
});

你可以写一个快捷方式:

as a shortcut you could write:

 $scope.theModal.result.then(doClosureFn, doDismissFn);

见参考

open 方法返回一个模态实例，一个具有以下属性的对象:

The open method returns a modal instance, an object with the following properties:

• close(result) - 一种可用于关闭模态并传递结果的方法
• dismiss(reason) - 一种可用于关闭模态并传递原因的方法
• result - 一个在模态关闭时被解决并在模态被解除时被拒绝的承诺
• opened - 在下载内容模板并解析所有变量后打开模态时解析的承诺'rendered' - 在呈现模态时解决的承诺.

这篇关于单击外部/esc 时，Angularjs Bootstrap 模态结束调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！