单击外部/ esc时,Angularjs引导模态关闭调用

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

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

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

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

见参考

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

• close(result) - 一种可用于关闭模态,传递结果的方法
• dismiss(reason) - 一种可用于解除模态,传递理由的方法
• 结果 - 在模式关闭时解决的承诺,在解除模态时拒绝的承诺
• 已打开 - 在下载内容模板并解析所有变量"渲染"后打开模态时解决的承诺 - 在呈现模式时解析的承诺.

Answer 2

旧问题,但如果要在各种关闭操作上添加确认对话框,请将其添加到模态实例控制器:

$scope.$on('modal.closing', function(event, reason, closed) {
    console.log('modal.closing: ' + (closed ? 'close' : 'dismiss') + '(' + reason + ')');
    var message = "You are about to leave the edit view. Uncaught reason. Are you sure?";
    switch (reason){
        // clicked outside
        case "backdrop click":
            message = "Any changes will be lost, are you sure?";
            break;

        // cancel button
        case "cancel":
            message = "Any changes will be lost, are you sure?";
            break;

        // escape key
        case "escape key press":
            message = "Any changes will be lost, are you sure?";
            break;
    }
    if (!confirm(message)) {
        event.preventDefault();
    }
});

我的右上角有一个关闭按钮,触发"取消"动作.单击背景(如果已启用),将触发取消操作.您可以使用它为各种关闭事件使用不同的消息.以为我会分享,以防其他人有用.

Answer 3

您可以使用$ modal.open()方法返回的"结果"承诺.如下:

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

      $scope.theModal.result.then(function(){
          console.log("Modal Closed!!!");
      }, function(){
          console.log("Modal Dismissed!!!");
      });
 }

您也可以使用"结果"承诺的"最终"回调如下:

     $scope.theModal.result.finally(function(){
          console.log("Modal Closed!!!");
      });