當模態對話框關閉時調用函數的數據屬性

我將Bootstrap與AngularJS結合使用來打開模態對話框。要在不編寫JavaScript代碼的情況下激活模式，我使用documentation中描述的數據屬性。這是一個非常方便的方式，因爲我不需要手動顯示/隱藏對話框。當模態對話框關閉時調用函數的數據屬性

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

現在我想在模態對話框關閉時調用方法。用明確的關閉按鈕，這是沒有問題的。但是，當用戶單擊對話框外部或按下按鍵時，我無法明確觸發任何功能。

我知道我可以使用jQuery或Angular的$uibModal來偵聽關閉事件，但這會使整個項目更加複雜。我寧願將它全部放在一個地方。我不想混淆，因此在我的AngularJS項目中使用jQuery不是一種選擇。我現在堅持使用的解決方案是手動使用$uibModal至open()對話框並捕獲結果以處理用戶調用的關閉。

我的問題：

我怎麼能調用一個函數，當一個模式對話框沒有引入太多的雜波關閉？

我心目中是這樣的（虛data-dismiss-callback）：

<button type="button" data-toggle="modal" 
         data-target="#myModal" 
         data-dismiss-callback="handleCloseEvent()">Launch modal</button>

來源

2017-09-19 user1438038

似乎包裹引導模式對話框到一個自定義組件（指令），然後處理解僱事件是一個選項。 –

，因爲我們希望使用開放的按鈕，附上指定的行爲（自定義回調）的目標模式，然後directive是能夠幫助我們實現這一目標的最佳人選。

我們將傾聽show.bs.modal and hide.bs.modal/hidden.bs.modal events：第一個將幫助我們確定是否使用相應按鈕打開模式，第二個是我們想要調用傳遞迴調函數的位置。

這裏是modalDismissCallback指令的工作示例（due to normalization，我們不能將其命名爲dataDismissCallback）：

angular.module('myDemoApp', []) 
 
    .controller('myCtrl', [function() { 
 
     var ctrl = this; 
 
     ctrl.testVar = 2; 
 
     ctrl.onModalDismiss = onModalDismiss; 
 

 
     function onModalDismiss(a, e) { 
 
      console.log(arguments); 
 
     } 
 

 
     return ctrl; 
 
    }]) 
 
    .directive('modalDismissCallback', [function modalDismissCallback() { 
 
     return { 
 
      restrict: 'A', 
 
      scope: { 
 
       modalDismissCallback: '&' 
 
      }, 
 
      link: function (scope, element) { 
 
       var modal = angular.element(element.data('target')); 
 

 
       modal.on('show.bs.modal', onShow); 
 
       modal.on('hide.bs.modal', onHide); 
 

 
       scope.$on('$destroy', function() { 
 
        modal.off('show.bs.modal', onShow); 
 
        modal.off('hide.bs.modal', onHide); 
 
       }); 
 
       
 
       var shouldCall = false; 
 

 
       function onShow(e) { 
 
        shouldCall = e.relatedTarget === element[0]; 
 
       } 
 

 
       function onHide(e) { 
 
        if (angular.isFunction(scope.modalDismissCallback) && shouldCall) { 
 
         scope.$event = e; 
 
         scope.$applyAsync(function() { 
 
          scope.modalDismissCallback.apply(this, arguments); 
 
         }); 
 
        } 
 
       } 
 
      } 
 
     } 
 
    }]);

<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.3/css/bootstrap.min.css"> 
 

 
<body ng-app="myDemoApp"> 
 

 
<div ng-controller="myCtrl as $ctrl"> 
 

 
    <button type="button" class="btn btn-default" 
 
      data-toggle="modal" 
 
      data-target="#myModal" 
 
      modal-dismiss-callback="$ctrl.onModalDismiss($ctrl.testVar, $event)">Launch modal 
 
    </button> 
 
    
 
    <button type="button" class="btn btn-default" 
 
      data-toggle="modal" 
 
      data-target="#myModal">Launch modal wo callback 
 
    </button> 
 

 
    <div id="myModal" class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" 
 
     aria-labelledby="mySmallModalLabel" aria-hidden="true"> 
 

 

 
     <div class="modal-dialog" role="document"> 
 
      <div class="modal-content"> 
 
       <div class="modal-header"> 
 
        <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
 
       </div> 
 
       <div class="modal-body"> 
 
        <div ng-include="'template.html'"></div> 
 
       </div> 
 
       <div class="modal-footer"> 
 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
       </div> 
 
      </div> 
 
     </div> 
 

 
    </div> 
 
</div> 
 

 
<script type="text/ng-template" id="template.html"><h5>Hello from ng-template!</h5></script> 
 
</body> 
 

 

 

 

 
<script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.slim.js"></script> 
 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>

來源

2018-01-14 12:25:59

當模態對話框關閉時調用函數的數據屬性

回答

相關問題