当模态对话框关闭时调用函数的数据属性

我将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

当模态对话框关闭时调用函数的数据属性

回答

相关问题