单击outside / 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

是的你可以。 在这种情况下，它会导致解雇事件，并且诺言也会被拒绝。 另外，请注意， $modal.open()方法返回的对象的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);

参见参考

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

也可以使用“结果” promise的“最终”回调，如下所示：

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

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

然后在模态控制器中，添加一个自定义的“取消”功能-在我的情况下会弹出一个甜美的警报，询问用户是否希望关闭模态：

  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”是模式内容窗口-我们停止该元素的事件传播，因此不会冒泡至“ myModal”。

这仅适用于单击模态（换句话说，单击背景）。 点击“ esc”将不会触发此回调。

Answer 5

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

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