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

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

앵글이 있어요.JS앱. 다 잘 되고 있어요.

이제 특정 조건이 충족되면 다른 팝업을 보여줘야 하는데, 어떻게 진행하면 좋을지 궁금했습니다.

현재 두 가지 옵션을 검토 중이지만 다른 옵션은 전적으로 열려 있습니다.

---

옵션 1

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

이로 인해 MVC 설계 패턴이 깨집니다.나는 이 해결책이 마음에 들지 않는다.

---

옵션 2

정적 HTML 파일에 모든 팝업 코드를 언제든지 삽입할 수 있습니다.그 후 를 사용하여ngShow올바른 팝업만 표시하거나 숨길 수 있습니다.

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

---

그래서 나는 내가 원하는 것을 성취할 수 있는 더 나은 방법이 있을 것이라고 확신한다.

Angular와의 경험을 바탕으로지금까지 JS모달 중 가장 우아한 어프로치는 모달에 표시되는 부분(HTML) 템플릿을 제공할 수 있는 전용 서비스라고 생각합니다.

우리가 생각해보면 모달은 약간 각진 느낌이야JS 루트는 모달팝업으로 표시됩니다.

앵귤러UI 부트스트랩프로젝트(http://angular-ui.github.com/bootstrap/)는 뛰어난 기능을 갖추고 있습니다.$modalservice(버전 0.6.0 이전에는 $dialog라고 불렸습니다)는 부분적인 내용을 모달팝업으로 표시하는 서비스 구현입니다.

저도 Angular를 배우고 있고 유튜브 채널에서 동영상을 보고 있어서 재밌어요.화자는 28:30분 경에 이 비디오 https://www.youtube.com/watch?v=ZhfUv0spHCY#t=1681에서 당신의 정확한 문제를 언급하고 있습니다.

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

새로운 팝업 요소를 DOM에 삽입하여 동일한 요소를 표시하거나 숨기지 않고 개별적으로 처리하는 것이 좋습니다.이렇게 하면 여러 개의 팝업을 표시할 수 있습니다.

동영상 전체가 매우 재미있습니다. :-)

• '팝업' 지시문을 만들어 팝업 콘텐츠의 컨테이너에 적용합니다.
• 지시문에서 내용을 마스크 div와 함께 절대 위치 div로 감습니다.
• 지시문 내에서 필요에 따라 DOM 트리의 2개의 div를 이동해도 괜찮습니다.화면 중앙에 팝업을 배치하는 코드를 포함하여 어떤 UI 코드든 상관없습니다.
• 부울 플래그를 생성하여 컨트롤러에 바인드합니다.이 플래그는 가시성을 제어합니다.
• OK/Cancel 함수 등에 결합하는 범위 변수를 만듭니다.

높은 수준의 예제를 추가하기 위한 편집(비기능)

<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를 사용하고 있습니다.이 ng-dialog는 유연하고 의존관계가 없습니다.

angular-ui에는 대화상자 지시어가 포함되어 있습니다.이를 사용하여 포함할 페이지에 templateurl을 설정합니다.그것이 가장 우아한 방법이고, 나는 그것을 내 프로젝트에도 사용해 왔다.필요에 따라 대화 상자에 대해 몇 가지 다른 매개 변수를 전달할 수 있습니다.

언급URL : https://stackoverflow.com/questions/15812203/show-pop-ups-the-most-elegant-way