ng-if와 ng-show / ng-hide의 차이점은 무엇입니까
ng-if와 ng-show/ 의 차이점을 이해하려고 ng-hide하지만 그들은 나에게 동일하게 보입니다.
둘 중 하나를 사용하도록 선택해야한다는 점에 유의해야 할 차이점이 있습니까?
ngIf
ngIf지정 없애거나를 재생성 하는 식에 기초하여 DOM 트리의 일부. 할당 된 표현식 ngIf이 false 값 으로 평가되면 요소가 DOM에서 제거되고, 그렇지 않으면 요소의 복제본이 DOM에 다시 삽입됩니다.
<!-- when $scope.myValue is truthy (element is restored) -->
<div ng-if="1"></div>
<!-- when $scope.myValue is falsy (element is removed) -->
<div ng-if="0"></div>
ngIf해당 범위를 사용하여 요소를 제거 하면 요소가 복원 될 때 새 범위가 작성됩니다. 작성된 범위 ngIf는 프로토 타입 상속을 사용하여 상위 범위에서 상속됩니다.
부모 범위에 정의 된 JavaScript 프리미티브에 바인딩하는 ngModel데 사용되는 경우 ngIf자식 범위 내의 변수를 수정해도 부모 범위의 값에 영향을 미치지 않습니다 (예 :
<input type="text" ng-model="data">
<div ng-if="true">
<input type="text" ng-model="data">
</div>
이 상황을 해결하고 하위 범위 내에서 상위 범위의 모델을 업데이트하려면 객체를 사용하십시오.
<input type="text" ng-model="data.input">
<div ng-if="true">
<input type="text" ng-model="data.input">
</div>
또는 $parent부모 범위 개체를 참조하는 변수 :
<input type="text" ng-model="data">
<div ng-if="true">
<input type="text" ng-model="$parent.data">
</div>
ngShow
ngShow지시자 쇼 또는 가죽 받는 제공된 식에 기초하여 상기 지정된 HTML 엘리먼트 ngShow속성. 요소를 ng-hideCSS 클래스를 제거하거나 추가하여 요소가 표시되거나 숨겨집니다 . .ng-hideCSS 클래스는 AngularJS와의 사전 정의 (AN 사용하여 없음으로 표시 스타일을 설정되는 !important플래그).
<!-- when $scope.myValue is truthy (element is visible) -->
<div ng-show="1"></div>
<!-- when $scope.myValue is falsy (element is hidden) -->
<div ng-show="0" class="ng-hide"></div>
경우 ngShow에 표현들을 평가는 false다음 ng-hideCSS 클래스가 추가됩니다 class원인이되는 요소의 속성이 숨겨 될 수 있습니다. 때 true1, ng-hideCSS 클래스 요소를 일으키는 원인이되는 요소에서 제거되지 숨겨진 나타납니다.
아마도 흥미로운 점은 둘 사이의 우선 순위의 차이 일 것입니다.
내가 알 수있는 한 ng-if 지시문은 모든 Angular 지시문 중 가장 높은 우선 순위 중 하나입니다. 즉, 우선 순위가 낮은 다른 모든 지시문보다 먼저 실행됩니다. 그것이 첫 번째로 실행된다는 사실은 내부 지시문이 처리 되기 전에 요소가 효과적으로 제거된다는 것을 의미 합니다. 또는 적어도 : 그것이 내가 만드는 것입니다.
현재 고객을 위해 구축하는 UI에서 이것을 관찰하고 사용했습니다. 전체 UI는 상당히 많이 포장되어 있으며 전체에 ng-show 및 ng-hide가 있습니다. 너무 자세하게 설명하지는 않지만 JSON 구성을 사용하여 관리 할 수있는 일반 구성 요소를 만들었으므로 템플릿 내에서 전환해야했습니다. ng-repeat가 존재하며 ng-repeat 내부에는 많은 ng-shows, ng-hides 및 ng-switches가있는 테이블이 표시됩니다. 그들은 목록에 적어도 50 번의 반복을 보여주고 싶었고 1500-2000 개의 지시어가 해결 될 것입니다. 코드를 확인하고 전면의 Java 백엔드 + 사용자 정의 JS가 데이터를 처리하는 데 약 150ms가 걸리고 Angular는 표시하기 전에 2-3 초 정도 씹습니다. 고객이 불만을 제기하지는 않았지만 겁이났습니다.
검색에서 ng-if 지시문을 우연히 발견했습니다. 이제이 UI를 구상 할 때 사용 가능한 ng-if가 없었 음을 지적하는 것이 가장 좋습니다. ng-show 및 ng-hide에는 부울을 반환하는 함수가 있기 때문에 모든 것을 ng-if로 쉽게 바꿀 수 있습니다. 그렇게함으로써, 모든 내부 지시문은 더 이상 평가되지 않는 것처럼 보였다. 즉, 평가중인 모든 지시문의 약 3 분의 1로 돌아가 UI가 로딩 시간을 약 500ms-1 초로 단축했습니다. (정확한 초를 결정할 방법이 없습니다)
참고 사항 : 지시어가 평가되지 않는다는 사실은 아래에서 일어나는 일에 대한 교육받은 추측입니다.
따라서 내 의견으로는 : 페이지에 요소가 있어야하지만 요소를 확인하기 위해 숨겨져 있어야하지만 단순히 숨겨져 있다면 ng-show / ng-hide를 사용하십시오. 다른 모든 경우에는 ng-if를 사용하십시오.
ng-if지시어는 페이지에서 콘텐츠를 제거하고 ng-show/ng-hide는 CSS를 사용 display숨기기 콘텐츠에 속성을.
이것은 당신이 사용하고자하는 경우에 유용 :first-child과 :last-child스타일로 의사 선택기.
@EdSpencer가 정확합니다. 요소가 많고 ng-if를 사용하여 관련 요소 만 인스턴스화하면 리소스가 절약됩니다. @CodeHater는 요소를 매우 자주 제거하고 표시하려는 경우 요소를 제거하는 대신 숨기면 성능이 향상 될 수 있습니다.
ng-if의 주요 사용 사례는 내용이 불법 인 경우 요소를 깨끗하게 확인하고 제거 할 수 있다는 것입니다. 예를 들어 null 이미지 이름 변수를 참조 할 수 있으며 오류가 발생하지만 ng-if이고 null인지 확인하면 모두 좋습니다. ng-show를 수행하면 오류가 계속 발생합니다.
ng-if 및 ng-show에 대해 유의해야 할 중요한 사항은 폼 컨트롤을 사용할 ng-if때 dom에서 요소를 완전히 제거 하기 때문에 사용하는 것이 좋습니다 .
이 차이는 입력 필드를 사용하여 입력 필드를 required="true"만든 다음 ng-show="false"숨기도록 설정 하면 사용자가 양식을 제출하려고 할 때 다음 오류가 발생 하기 때문에 중요 합니다.
An invalid form control with name='' is not focusable.
입력 필드 인 이유가 존재 required하지만 숨겨져 있기 때문에 Chrome에서 초점을 맞출 수 없습니다. 이 오류로 인해 스크립트 실행이 중단되므로 코드가 문자 그대로 중단 될 수 있습니다. 그러니 조심해!
@Gajus Kuizinas 및 @CodeHater가 정확합니다. 여기에 예제가 있습니다. ng-if로 작업하는 동안 할당 된 값이 false이면 전체 html 요소가 DOM에서 제거됩니다. 할당 된 값이 true이면 html 요소가 DOM에 표시됩니다. 범위는 상위 범위와 다릅니다. 그러나 ng-show의 경우 지정된 값을 기준으로 요소를 표시하고 숨길 수 있습니다. 그러나 항상 DOM에 남아 있습니다. 지정된 값에 따라 가시성 만 변경됩니다.
http://plnkr.co/edit/3G0V9ivUzzc8kpLb1OQn?p=preview
이 예제가 범위를 이해하는 데 도움이되기를 바랍니다. ng-show 및 ng-if에 잘못된 값을 제공하고 콘솔에서 DOM을 확인하십시오. 입력 상자에 값을 입력하고 차이를 관찰하십시오.
<!DOCTYPE html>
안녕하세요 플 런커!
<input type="text" ng-model="data">
<div ng-show="true">
<br/>ng-show=true :: <br/><input type="text" ng-model="data">
</div>
<div ng-if="true">
<br/>ng-if=true :: <br/><input type="text" ng-model="data">
</div>
{{data}}
사실, ng-if지시어 는와 달리 ng-show자체 범위를 생성하여 흥미로운 실제 차이를 만듭니다.
angular.module('app', []).controller('ctrl', function($scope){
$scope.delete = function(array, item){
array.splice(array.indexOf(item), 1);
}
})<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app' ng-controller='ctrl'>
<h4>ng-if:</h4>
<ul ng-init='arr1 = [1,2,3]'>
<li ng-repeat='x in arr1'>
{{show}}
<button ng-if='!show' ng-click='show=!show'>Delete {{show}}</button>
<button ng-if='show' ng-click='delete(arr1, x)'>Yes {{show}}</button>
<button ng-if='show' ng-click='show=!show'>No</button>
</li>
</ul>
<h4>ng-show:</h4>
<ul ng-init='arr2 = [1,2,3]'>
<li ng-repeat='x in arr2'>
{{show}}
<button ng-show='!show' ng-click='show=!show'>Delete {{show}}</button>
<button ng-show='show' ng-click='delete(arr2, x)'>Yes {{show}}</button>
<button ng-show='show' ng-click='show=!show'>No</button>
</li>
</ul>
<h4>ng-if with $parent:</h4>
<ul ng-init='arr3 = [1,2,3]'>
<li ng-repeat='item in arr3'>
{{show}}
<button ng-if='!show' ng-click='$parent.show=!$parent.show'>Delete {{$parent.show}}</button>
<button ng-if='show' ng-click='delete(arr3, x)'>Yes {{$parent.show}}</button>
<button ng-if='show' ng-click='$parent.show=!$parent.show'>No</button>
</li>
</ul>
</div>첫 번째 목록 에서 innner / own 범위의 on-click이벤트 show변수 가 변경되었지만 동일한 이름의 외부 범위 에서 다른 변수를보고 있으므로 솔루션이 작동하지 않습니다. 의 경우에서 우리는 하나 개가 작동 왜 변수, 즉. 첫 번째 시도를 해결 하려면를 통해 부모 / 외부 범위에서 참조해야합니다 .ng-ifng-showshowshow$parent.show
ng-if false 인 경우 DOM에서 요소를 제거합니다. 즉, 해당 요소에 첨부 된 모든 이벤트, 지시문이 손실됩니다. 예를 들어 ng-if를 하위 요소 중 하나로 클릭하면 ng-if가 false로 평가되면 해당 요소가 DOM에서 제거되고 다시 true 일 때 다시 작성됩니다.
ng-show / ng-hide는 DOM에서 요소를 제거하지 않습니다. CSS 스타일 (.ng-hide)을 사용하여 요소를 숨기거나 표시합니다. 이렇게하면 자식에 연결된 이벤트, 지시문이 손실되지 않습니다.
ng-if는 자식 범위를 만드는 반면 ng-show / ng-hide는 자식 범위를 만듭니다.
참고로, 나에게 일어난 일 : ng-show는 CSS를 통해 내용을 숨 깁니다. 그러나 div의 이상한 결함은 버튼이어야합니다.
나는 바닥에 두 개의 버튼이있는 카드를 가지고 있었고 실제 상태에 따라 새로운 항목이있는 세 번째 예 인 편집 버튼과 교환되었습니다. ng-show = false를 사용하여 왼쪽 파일을 숨기려면 (파일에서 첫 번째로 표시됨) 다음 버튼이 카드의 오른쪽 테두리로 끝납니다. ng-if는 코드를 전혀 포함하지 않아서 수정합니다. (ng-show 대신 ng-if를 사용하여 숨겨진 놀라움이 있는지 여기에서 확인하십시오)
ng-show 및 ng-hide는 반대 방식으로 작동합니다. 그러나 ng-if와 ng-hide 또는 ng-show의 차이점은 ng-if를 사용하면 dom에 요소가 생성되지만 ng-hide / ng-show 요소는 완전히 숨겨집니다.
ng-show=true/ng-hide=false:
Element will be displayed
ng-show=false/ng-hide=true:
element will be hidden
ng-if =true
element will be created
ng-if= false
element will be created in the dom.
ngIf 는 요소를 제거하거나 다시 작성하여 DOM을 조작합니다.
반면 ngShow은 숨기기에 CSS 규칙을 적용 / 일을 보여줍니다.
대부분의 경우 (항상 그런 것은 아님) , 나는 당신이 일을 표시 / 숨기기 위해 한 번 확인 ng-if해야하는 경우, 화면의 사용자 작업을 기반으로 물건을 표시 / 숨기기 해야하는 경우 (확인 된 것과 같이) 사용 확인란을 선택한 다음 텍스트 상자를 표시하고 선택하지 않은 다음 텍스트 상자 등을 숨 깁니다.))ng-show
ng-if와 ng-show의 한 가지 흥미로운 차이점은 다음과 같습니다.
보안
ng-if 블록에 존재하는 DOM 요소는 값이 false 인 경우 렌더링되지 않습니다.
ng-show의 경우와 같이 사용자는 요소 검사 창을 열고 그 값을 TRUE로 설정할 수 있습니다.
그리고 후프와 함께 숨겨져 있던 모든 내용이 표시되는데, 이는 보안 위반입니다. :)
'development' 카테고리의 다른 글
| 배열을 객체로 변환 (0) | 2020.02.19 |
|---|---|
| 강사가 작성한 모든 C 파일이 첫 번째 줄에서 단일 #으로 시작하는 이유는 무엇입니까? (0) | 2020.02.19 |
| 스칼라의 사례 클래스와 클래스의 차이점은 무엇입니까? (0) | 2020.02.19 |
| CSS-부동 자식 DIV 높이를 부모 높이로 확장 (0) | 2020.02.19 |
| 여러 테이블에서 SQL 쿼리 반환 데이터 (0) | 2020.02.19 |