AngularJs - 모달 윈도우를 분리하려면 어떻게해야합니까?

Question

저는 AngularJS로 상당한 시간 동안 작업 해 왔지만 여전히 지침 뒤에 숨겨진 장면을 이해해야합니다.

필요에 따라 모달 창을 부착하고 더 이상 필요하지 않은 경우 DOM에서 분리하는 지시문을 작성하려고합니다.

그래서 나는이 한 :

app.directive('myDirective',function($document){ 

    return{ 

     restrict: 'E', 
     templateUrl: 'partials/modules/template.html', 
     link: function($scope,$element){ 

      var body = $document.find('body').eq(0); 

      $element.remove();    

      $scope.create = function(){     
       body.append($element);     
      }; 

     } 

    } 

}); 

을 그리고 그것은 뷰와 컨트롤러 사이의 연결의 손실이 발생할 것이라는 점을 발견했다.

지금까지 그렇게 나빴습니다.

하지만 기본 개념은 무엇입니까? 이것을 성취하는 올바른 방법은 무엇입니까?

나는 수동으로

다시 연결하는 물건을 다시 함께 hide의 CSS 클래스를 설정 ng-show

를 사용

• 포함 내 머리에, 약간 지저분한 (그리고 해키) 옵션을 가지고있다 추가 후

그들은 이상하게 보일 뿐이지 만 나에게 잘못되어있어 특히 스타일 속성을 사용하고 싶지 않습니다.

또한 Angular-UI의 모달 모듈을 사용하고 싶지 않습니다.

Answer 1

스타일 속성 사용에 대한 의견을 다시 고려해야합니다.

'AngularJS의 주요 디자인 목표 중 하나는 응용 프로그램 개발자가 DOM을 직접 조작하지 않아도 웹 응용 프로그램을 작성할 수 있도록 허용하는 것입니다. 많은 경우 이것은 훨씬 더 선언적인 프로그래밍 스타일로 연결됩니다. 이를 통해 비즈니스 논리를 쉽게 단위 테스트 할 수 있으며 응용 프로그램 개발 속도를 크게 높일 수 있습니다. 'What is the AngularJS way to show or hide a form element?

나는 항상 이런 종류의 일을합니다. ng-class와 json을 사용하면 가장 간단하게 테스트 할 수있는 가장 쉬운 방법입니다. 여기에 대략적인 아이디어가 있습니다.

app.directive('myDirective',function($document){ 

return{ 

    restrict: 'E', 
    templateUrl: '<div myDirective ng-class="{\'hideClass\':object.hide===true, \'showClass\':object.show===true "></div>', 
    link: function($scope,$element){ 

     scope.element= {hide:false, show:true}   

     if(someCondition) { 
     scope.element.hide = true; 
     } 
     if (anotherCondition) { 
     scope.element.show = true; 
     } 

    } 

    } 

}); 

그런 다음 테스트 :

it('should be hidden if...', function() { 
    angular.mock.inject(function ($compile, $rootScope) { 
     var scope = $rootScope.$new(); 
     var elem = $compile('<div myDirective></div>')(scope); 
     // ... some conditional code to manipulate scope.element json, you may need timeout to wait for DOM to load so you can check that the class is present    
     expect(elem.hasClass('hideClass')).toBe(true); 
    }); 
}); 

Answer 2

문제는 create 메소드에서 $ element.remove()를 호출 한 다음 body.append ($ element)를 호출하면 더 이상 "컴파일 된"각도가 아닙니다. 이것이 연결이 끊어진 이유입니다. 게재 할 때마다 컴파일하고 추가하는 것이 가장 효율적인 솔루션은 아닙니다 (위에서 언급 한 것처럼).

요소/모달 표시 및 숨기기에 CSS를 사용하는 것이 왜 해로운 것으로 간주됩니까? 이것이 대부분의 UI 프레임 워크에서 수행 된 방법입니다.

나는 problem is (템플릿의 버튼은 hideMe 함수를 호출 할 수 없다)과 CSS class을 사용하는 예제의 jsfiddle을 조합했습니다. 모달 생성/숨기기에 대한 범위 방법 내에서

.modal.show { 
    display: block; 
} 

.modal { 
    display: none; 
    position: absolute; 
    height: 100px; 
    width: 100px; 
    margin: 15px auto auto; 
    border: 1px solid blue; 
    padding: 5px; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background-color: white; 
    z-index: 200; 
} 

사용 addClass 및 removeClass :

mod.directive("myDirective", function() { 
    return{ 

     restrict: 'E', 
     replace: true, 
     template: '<div class="modal">Hello<button ng-click="hideMe()">&times;</button></div>', 
     link: function($scope,$element){ 
      var shade = angular.element('<div class="shade"></div>');  

      $scope.create = function(){     
       $element.addClass("show");     
       $element.after(shade); 
      }; 

      $scope.hideMe = function() { 
       $element.removeClass("show"); 
       shade.remove(); 
      } 

     } 
    } 
}); 

숨기기가/요소를 보여주는 것은 일이 CSS 중 하나입니다

스타일의 단순함을 무시 정말 잘합니다. 최소한의 추가 작업으로 CSS를 사용하고 싶다면 멋진 애니메이션과 장면 전환을 얻을 수도 있습니다.