javascript - example - md modal angularjs




팝업을 가장 우아한 방법으로 보여줍니다. (4)

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

이제 특정 조건이 참이 될 때 다른 팝업을 표시해야하며 앞으로 나아갈 수있는 가장 좋은 방법이 무엇인지 궁금합니다.

현재 두 가지 옵션을 평가 중이지만 다른 옵션에 대해서는 전적으로 열려 있습니다.

옵션 1

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

이렇게하면 MVC 디자인 패턴이 손상됩니다. 이 솔루션에 만족스럽지 않습니다.

옵션 2

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

이 옵션은 실제로 확장 가능하지 않습니다.

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


Angular 자신을 학습하고 Youtube의 채널에서 일부 동영상을보고 있었기 때문에 재미있었습니다. 연사는 28:30 분을 기준으로 본 동영상의 정확한 문제를 https://www.youtube.com/watch?v=ZhfUv0spHCY#t=1681 에 설명합니다.

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

내 생각 엔 새로운 팝업 요소를 DOM에 삽입하고 동일한 요소를 표시하거나 숨기는 대신 별도의 요소를 처리하는 것입니다. 이렇게하면 여러 개의 팝업을 가질 수 있습니다.

전체 비디오는 다음과 같이보기에도 매우 흥미 롭습니다.


Angular-Ui는 대화 지시어와 함께 제공됩니다. 템플릿을 사용하여 포함시킬 페이지를 템플릿으로 설정하십시오. 가장 우아한 방법이며 프로젝트에서도 사용했습니다. 필요에 따라 여러 다른 매개 변수를 대화 상자에 전달할 수 있습니다.


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

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

AngularUI 부트 스트랩 프로젝트 ( http://angular-ui.github.com/bootstrap/ )는 부분적인 버전을 표시하는 서비스 구현 인 탁월한 $modal 서비스 (버전 0.6.0 이전의 $ 대화 상자라고도 함)를 사용합니다 모달 팝업으로 콘텐츠.


  • '팝업'지시어를 만들고 팝업 내용의 컨테이너에 적용하십시오.
  • 지시문에서 절대 위치 div와 그 아래 마스크 div를 사용하여 내용을 래핑하십시오.
  • 지시어 내에서 필요에 따라 DOM 트리에서 2 개의 div를 옮기는 것이 좋습니다. 모든 UI 코드는 화면 중앙에 팝업을 배치하는 코드를 포함하여 지시문에서 정상입니다.
  • boolean 플래그를 작성해 컨트롤러에 바인드합니다. 이 플래그는 가시성을 제어합니다.
  • 확인 / 취소 기능 등에 연결되는 범위 변수를 만듭니다.

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

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




show-hide