javascript - 单击外部/esc时，Angularjs Bootstrap模式关闭调用

Question

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

这是我的模式:

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

可以通过单击 ESC 按钮或单击模态区域外部来关闭模态。发生这种情况时有办法运行函数吗？我不太确定如何捕捉这种结束语。

我知道我可以通过使用 ng-click="closeModal()" 来手动关闭模式，如下所示:

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

Answer 1

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

有了 promise ，你就可以...

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

作为快捷方式，您可以编写:

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

See ref

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

• close(result) - a method that can be used to close a modal, passing a result
• dismiss(reason) - a method that can be used to dismiss a modal, passing a reason
• result - a promise that is resolved when a modal is closed and rejected when a modal is dismissed
• opened - a promise that is resolved when a modal gets opened after downloading content's template and resolving all variables 'rendered' - a promise that is resolved when a modal is rendered.