angularjs

• ‘popup’지시문을 작성하여 팝업 컨텐츠의 컨테이너에 적용하십시오.
• 지시문에서 내용을 절대 위치 div와 그 아래의 마스크 div로 감싸십시오.
• 지시문 내에서 필요에 따라 DOM 트리에서 2 개의 div를 이동해도됩니다. 팝업을 화면 중앙에 배치하는 코드를 포함하여 지시문에서 모든 UI 코드는 정상입니다.
• 부울 플래그를 작성하여 제어기에 바인드하십시오. 이 플래그는 가시성을 제어합니다.
• 확인 / 취소 기능 등에 결합되는 범위 변수를 작성하십시오.

고급 예를 추가하기위한 편집 (비 기능)

<div id='popup1-content' popup='showPopup1'>
  ....
  ....
</div>


<div id='popup2-content' popup='showPopup2'>
  ....
  ....
</div>



.directive('popup', function() {
  var p = {
      link : function(scope, iElement, iAttrs){
           //code to wrap the div (iElement) with a abs pos div (parentDiv)
          // code to add a mask layer div behind 
          // if the parent is already there, then skip adding it again.
         //use jquery ui to make it dragable etc.
          scope.watch(showPopup, function(newVal, oldVal){
               if(newVal === true){
                   $(parentDiv).show();
                 }
              else{
                 $(parentDiv).hide();
                }
          });
      }


   }
  return p;
});

답변