가장 우아한 방법으로 팝업 표시

이 AngularJS 앱이 있습니다. 모든 것이 잘 작동합니다.

이제 특정 조건이 충족되면 다른 팝업을 표시해야하며 진행하는 가장 좋은 방법이 무엇인지 궁금했습니다.

현재 두 가지 옵션을 평가하고 있지만 다른 옵션에 절대적으로 개방되어 있습니다.

옵션 1

팝업을위한 새로운 HTML 요소를 생성하고 컨트롤러에서 직접 DOM에 추가 할 수 있습니다.

MVC 디자인 패턴이 깨집니다. 이 솔루션에 만족하지 않습니다.

옵션 2

항상 모든 HTML 코드를 정적 HTML 파일에 삽입 할 수있었습니다. 그런 다음을 사용 ngShow하여 올바른 팝업 만 숨기거나 표시 할 수 있습니다.

이 옵션은 실제로 확장 할 수 없습니다.

그래서 내가 원하는 것을 달성하는 더 좋은 방법이 있어야한다고 확신합니다.

지금까지 AngularJS 모달에 대한 경험을 바탕으로 가장 우아한 접근법은 모달에 표시 할 부분 (HTML) 템플릿을 제공 할 수있는 전용 서비스라고 생각합니다.

우리가 생각할 때 모달은 일종의 AngularJS 경로이지만 모달 팝업으로 표시됩니다.

AngularUI 부트 스트랩 프로젝트 ( http://angular-ui.github.com/bootstrap/ )에는 $modal부분 컨텐츠를 다음과 같이 표시하는 서비스 구현 인 우수한 서비스 (버전 0.6.0 이전에 $ dialog라고 함)가 있습니다. 모달 팝업.

내가 Angular를 배우고 Youtube의 채널에서 일부 비디오를보고 있었기 때문에 재미 있습니다. 발표자는 28:30 분 경 에이 동영상 https://www.youtube.com/watch?v=ZhfUv0spHCY#t=1681 에서 정확한 문제를 언급합니다 .

컨트롤러가 아닌 서비스에 특정 코드를 배치하는 것이 중요합니다.

내 생각에 새로운 팝업 요소를 DOM에 삽입하고 동일한 요소를 표시하거나 숨기지 않고 개별적으로 처리해야합니다. 이 방법으로 여러 개의 팝업을 가질 수 있습니다.

전체 비디오는 매우 흥미 롭습니다 :-)

• '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;
});

Angular와 함께 모달 대화 상자를 수행하고 부트 스트랩이 필요없는 간단한 방법은 http://adamalbrecht.com/2013/12/12/creating-a-simple-modal-dialog-directive-in-angular-js/ 를 참조하십시오

편집 : 나는 유연하고 의존성이없는 http://likeastore.github.io/ngDialog 에서 ng-dialog를 사용 하고 있습니다.

Angular-ui에는 대화 상자 지시문이 있습니다. 사용하고 포함하려는 페이지로 templateurl을 설정하십시오. 이것은 가장 우아한 방법이며 내 프로젝트에서도 사용했습니다. 필요에 따라 대화 상자에 다른 여러 매개 변수를 전달할 수 있습니다.