Angular의 기본 지침에서 이러한 지침은 요소가 표시되는지 여부, NG-SHOW/NG-HIDE/NG-IF 및 NG-SWITCH를 제어하는 데 사용됩니다.
또한 종종 각도 성능 최적화에서 사용합니다.
그들의 차이점을 보자.
그중에서도 NG-SHOW와 NG-HIDE는 동일합니다. NG-SHOW는 만나는 조건을 표시하고 NG-HIDE는 만나는 조건을 숨 깁니다. 우리는 아래에서 ng-hide를 언급하지 않을 것입니다.
ng-show
NG-SHOW가받은 부울 값은 TRUE 일 때 DOM 노드를 표시하도록 트리거됩니다. NG-SHOW의 값이 False 인 경우 NG-HIDE 클래스가 DOM 노드에 추가 되고이 클래스의 표현식은 "디스플레이 : 없음"입니다. DOM이로드되면 NG-SHOW의 모든 노드가로드됩니다. 즉, NG-SHOW는 DOM 노드 만 숨기고 표시합니다. 즉, NG-SHOW 명령에 오일이 너무 많으면 표시되지 않더라도 DOM 노드가 여전히 렌더링됩니다.
NG-IF
NG-IF는 또한 bool 값을받습니다. 값이 False 인 경우 컨트롤이 생성되지 않거나 이전 DOM 노드가 파괴됩니다. 이 노드에 많은 NG 바인딩이 포함되어 있더라도 실행되지 않습니다. 따라서 프로젝트 개발에서 DOM을 한 번에로드 할 필요가 없다면 NG-IF를 사용하여 NG 이벤트가 발생하지 않도록하여 DOM의 로딩 속도 속도를 높일 수 있습니다. 특히 반복 할 때 각 데이터 조각에 복잡한 데이터 구조가 포함될 때 효과가 특히 명백합니다. 값이 참이되면 DOM 노드가 생성됩니다.
따라서 명령 및 템플릿을 사용하여 목록 항목의 자세한 정보를 클릭하여 클릭하는 것과 같은 추가 정보를 렌더링하는 경우 NG-IF (AngularJSV. 1.1.5 이상)를 사용해야합니다. 렌더링을 차단합니다 (NG-SHOW와 비교).
ng-switch
ng-switch의 존재는 우리에게 많은 어려움을 덜어줍니다 (Angular 자체가 이것과 같다고 말해야합니다). 예를 들어, 전통적인 방법을 사용하여 탭 탭을 만들었습니다. 우리는 반복해서 반복 한 다음 현재 상태를 판단한 다음 해당 사항을 실행해야합니다. Angular에서 ng-switch를 사용하는 것은 매우 간단합니다. NG-Switch는 먼저 특정 변수를 듣고 변수의 가치가있는 경우 아래에 표시되는 내용이 표시되어야합니다. 위에서 볼 수 있듯이 유형의 값이 'AAA'와 같을 때이 영역이 생성되고 표시됩니다. 유형의 값이 'BBB'와 같으면 이전 'AAA'의 모든 돔이 파괴되고 모든 'BBB'도 생성되어 표시됩니다.
예제 http://jsbin.com/hinehi/1/edit