모달 대화 상자가 닫힐 때 함수를 호출하는 데이터 속성

모달 대화 상자를 열기 위해 AngularJS와 함께 부트 스트랩을 사용하고 있습니다. JavaScript 코드를 작성하지 않고 모달을 활성화하려면 documentation에 설명 된대로 데이터 속성 을 사용합니다. 대화 상자를 수동으로 표시하거나 숨길 필요가 없기 때문에 이것은 매우 편리한 방법입니다.모달 대화 상자가 닫힐 때 함수를 호출하는 데이터 속성

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

는 지금은 모달 대화 상자를 닫을 때 메서드를 호출하고 싶습니다. 명시 적 닫기 버튼이 있으면 아무런 문제가되지 않습니다. 그러나 사용자가 대화 상자 외부를 클릭하거나 Esc 키를 누르면 모든 함수를 명시 적으로 트리거 할 수 없습니다.

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

모달 대화 상자가 닫힐 때 함수를 호출하는 데이터 속성

답변

관련 문제