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