Angularjs Bootstrap 单击 outside/esc 时的模式关闭调用

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

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

有了承诺你就可以...

//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.

Answer 2

您可以使用 $modal.open() 方法返回的 "result" 承诺。如下图：

 $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!!!");
      });
 }

您还可以使用 "finally" 回调 "result" 承诺，如下所示：

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

Answer 3

老问题，但如果您想在各种关闭操作上添加确认对话框，请将其添加到您的模态实例控制器中：

$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();
    }
});

我的右上角有一个关闭按钮，它会触发 "cancel" 操作。单击背景（如果启用）会触发取消操作。您可以使用它为各种关闭事件使用不同的消息。想我会分享以防对其他人有帮助。

Answer 4

在我的例子中，当单击关闭模态时，我们希望显示提示警告用户这样做会丢弃模态表单中所有未保存的数据。为此，请在模态上设置以下选项：

var myModal = $uibModal.open({
          controller: 'MyModalController',
          controllerAs: 'modal',
          templateUrl: 'views/myModal.html',
          backdrop: 'static',
          keyboard: false,
          scope: modalScope,
          bindToController: true,
        });

这可以防止模式在单击关闭时关闭：

backdrop: 'static'

这可以防止模式在点击 'esc':

时关闭

keyboard: false

然后在模态控制器中，添加自定义 "cancel" 函数 - 在我的例子中，会弹出一个甜蜜的警报，询问用户是否希望关闭模态：

  modal.cancel = function () {
    $timeout(function () {
      swal({
        title: 'Attention',
        text: 'Do you wish to discard this data?',
        type: 'warning',
        confirmButtonText: 'Yes',
        cancelButtonText: 'No',
        showCancelButton: true,
      }).then(function (confirm) {
        if (confirm) {
          $uibModalInstance.dismiss('cancel');
        }
      });
    })
  };

最后，在模态控制器中，添加以下事件侦听器：

  var myModal = document.getElementsByClassName('modal');
  var myModalDialog = document.getElementsByClassName('modal-dialog');

  $timeout(function () {
    myModal[0].addEventListener("click", function () {
      console.log('clicked')
      modal.cancel();
    })

    myModalDialog[0].addEventListener("click", function (e) {
      console.log('dialog clicked')
      e.stopPropagation();
    })
  }, 100);

"myModal" 是您要对其调用 modal.cancel() 回调函数的元素。 "myModalDialog" 是模态内容 window - 我们停止了该元素的事件传播，因此它不会冒泡到 "myModal".

这仅适用于点击关闭模式（换句话说点击背景）。点击 'esc' 不会触发此回调。

Answer 5

您可以尝试 ng-click="$dismiss()"

而不是 ng-click="closeModal()"

<button ng-click="$dismiss()">Close</button>

Answer 6

我们也可以像这样在控制器中调用jquery 'On'事件。这里"viewImageModal"是弹窗的id。

constructor($scope: AuditAppExtension.IActionPlanScope, dataSvc: ActionPlanService, Upload, $timeout, $mdToast: any) {

            $('#viewImageModal').on('shown.bs.modal', function (e) {
                console.log("shown", e);

                $scope.paused = false;
                $modal.find('.carousel').carousel('cycle');
            });

            $('#viewImageModal').on('hide.bs.modal', function (e) {
                console.log("hide", e);

                return true;
            });
}

Angularjs Bootstrap 单击 outside/esc 时的模式关闭调用

Angularjs Bootstrap modal closing call when clicking outside/esc

javascript

angularjs

angular-ui

angular-ui-bootstrap