ng-if와 ng-show/ng-hide의 차이점은 무엇입니까?
나는 그들 사이의 차이점을 이해하려고 노력하고 있습니다.ng-if그리고.ng-show/ng-hide하지만 내 눈에는 똑같아 보입니다.
둘 중 하나를 사용하는 것을 선택하는 것을 염두에 두어야 하는 차이점이 있습니까?
ngIf
그ngIf디렉티브는 식을 기반으로 DOM 트리의 일부를 제거하거나 다시 만듭니다.다음에 할당된 식을 사용할 경우ngIf잘못된 값으로 평가되면 요소가 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프로토타입 상속을 사용하여 상위 범위에서 상속합니다.
한다면ngModel는 내서사다니용 에서 사용됩니다.ngIf부모 범위에 정의된 JavaScript 프리미티브에 바인딩하기 위해 자식 범위 내에서 변수를 수정하면 부모 범위의 값에 영향을 주지 않습니다.
<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>
ng쇼
그ngShow디렉티브는 제공된 표현식을 기반으로 주어진 HTML 요소를 표시하거나 숨깁니다.ngShow기여하다.요소는 다음 요소를 제거하거나 추가하여 표시하거나 숨깁니다.ng-hide요소에 대한 CSS 클래스입니다. 그.ng-hide는 AngularCSS의 Angular에서 미리 정의됩니다.합니다(JS 및플레사스설다없니정합(JS 디스로을)).!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-hide는 CSS 클가추니에 됩니다.class요소의 특성으로 인해 요소가 숨겨집니다. 때true,ng-hideCSS 클래스가 요소에서 제거되어 요소가 숨겨지지 않습니다.
아마도 흥미로운 점은 둘 사이의 우선순위의 차이일 것입니다.
제가 알기로는 ng-if 지시어는 모든 Angular 지시어 중 가장 높은 우선순위를 가지고 있습니다.즉, 우선순위가 낮은 다른 모든 지시보다 먼저 실행됩니다.먼저 실행된다는 것은 내부 지시사항이 처리되기 전에 요소가 효과적으로 제거된다는 것을 의미합니다.아니면 적어도: 그것이 제가 생각하는 것입니다.
저는 현재 고객을 위해 구축 중인 UI에서 이를 관찰하고 사용했습니다.UI 전체가 꽤 많이 포장되어 있고, 곳곳에 ng-show와 ng-hide가 있었습니다.너무 자세히 설명하지는 않지만 JSON 구성을 사용하여 관리할 수 있는 일반 구성 요소를 구축했기 때문에 템플릿 내부에서 전환을 수행해야 했습니다.ng-repeat이 있고, ng-repeat 안에 ng-show, ng-hides, ng-switch가 많이 있는 표가 보입니다.그들은 목록에서 최소 50번의 반복을 보여주기를 원했고, 이로 인해 1500-2000개의 지침이 다소 해결되었습니다.코드를 확인해보니 앞면의 자바 백엔드 + 커스텀 JS는 데이터를 처리하는 데 약 150ms가 소요되고 Angular는 표시하기 전에 2-3초 정도 씹습니다.고객은 불평하지 않았지만, 나는 소름이 끼쳤습니다 :-)
제가 찾다가 ng-if 지침을 우연히 발견했습니다.이 UI를 구상하는 시점에는 사용 가능한 경우가 없다는 점을 지적하는 것이 가장 좋습니다.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도 어느 정도 정확합니다. 요소를 자주 제거하고 표시하려면 요소를 제거하는 대신 숨기는 것이 성능을 향상시킬 수 있습니다.
제가 fong-if를 발견한 주요 사용 사례는 내용이 불법인 경우 요소를 깨끗하게 검증하고 제거할 수 있다는 것입니다.예를 들어 null 이미지 이름 변수를 참조하면 오류가 발생하지만, Ing-if 및 null인지 확인하면 모두 정상입니다.제가 ng-show를 해도 오류가 계속 발생할 것입니다.
한 할 점은 폼 때 ng-if ng-show를 사용하는 더입니다.ng-if돔에서 요소를 완전히 제거하기 때문입니다.
는 만약 이 이차중이입력경으로 필드를 ,required="true"에 그음에다를 합니다.ng-show="false"이를 숨기기 위해 사용자가 양식을 제출하려고 할 때 Chrome은 다음 오류를 발생시킵니다.
An invalid form control with name='' is not focusable.
하며, 는 입력필존이다같음습과다니유는는입니다.required하지만 그것이 숨겨져 있기 때문에 Chrome은 그것에 집중할 수 없습니다.이 오류로 인해 스크립트 실행이 중단되므로 코드가 문자 그대로 손상될 수 있습니다.그러니 조심하세요!
@Gajus Kuizinas와 @CodeHater가 맞습니다.여기서 저는 단지 예를 들어줄 뿐입니다.ng-if로 작업하는 동안 할당된 값이 거짓이면 전체 html 요소가 DOM에서 제거되고, 할당된 값이 참이면 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> 번째 목록에서, 첫째목록서에번,,on-click 이트벤,,show내부/자체 범위에서 변수가 변경되지만,ng-if이름이 같은 다른 변수를 외부 범위에서 감시하고 있으므로 솔루션이 작동하지 않습니다.의 경우ng-show가 유일하게 있는 것이 .show변수, 그것이 작동하는 이유입니다.첫 번째 시도를 수정하려면 다음을 참조해야 합니다.show/모의범서위를 통해$parent.show.
ng-iffalse이면 DOM에서 요소를 제거합니다.즉, 해당 요소에 연결된 모든 이벤트와 지시사항이 손실됩니다.예를 들어, ng-if가 false로 평가되면 요소가 DOM에서 제거되고 true이면 요소가 다시 생성됩니다.
ng-show/ng-hide는 DOM에서 요소를 제거하지 않습니다.CSS 스타일(.ng-hide)을 사용하여 요소를 숨기거나 표시합니다.이렇게 하면 자녀에게 첨부된 지시사항이 손실되지 않습니다.
ng-if는 하위 범위를 생성하지만 ng-show/ng-hide는 생성하지 않습니다.
ng-show 작업과 ng-hide 작업은 반대 방향입니다.그러나 ng-hide 또는 ng-show와 ng-if의 차이점은 ng-if를 사용하면 요소가 돔에 생성되지만 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.
참고로, 지금 저에게 일어난 일은 ng-show가 css를 통해 콘텐츠를 숨기는 것입니다. 네, 하지만 그것은 div의 버튼으로 추정되는 이상한 결함을 초래했습니다.
저는 하단에 두 개의 버튼이 있는 카드를 가지고 있었고 실제 상태에 따라 하나는 새로운 항목이 있는 세 번째 예 편집 버튼으로 교환됩니다.ng-show=false를 사용하여 왼쪽 버튼(파일에 먼저 있음)을 숨김으로써 다음 버튼이 카드 외부의 오른쪽 테두리로 끝나는 경우가 발생했습니다. ng-if는 코드를 전혀 포함하지 않음으로써 이 문제를 해결합니다.(여기서 ng-show 대신 ng-if를 사용하여 숨겨진 놀라움이 있는지 확인했습니다.)
ngIf는 요소를 제거하거나 다시 만들어 DOM에서 조작합니다.
반면 ngShow는 css 규칙을 적용하여 물건을 숨깁니다.
대부분의 경우(항상 그렇지는 않음), 물건을 표시/숨기기 위해 일회성 확인이 필요한 경우 다음과 같이 요약합니다.ng-if예: 확인란 후 상자 표시, 후 숨기기에는 다음을 합니다(예: 확: 숨예기선경우표우경시화, 택않텍상트스숨등기기자경선은필우, 가하한요사기지용기텍상스표작).ng-show
ng-if와 ng-show의 한 가지 흥미로운 차이점은 다음과 같습니다.
보안.
ng-if 블록을 나타내는 DOM 요소는 값이 false인 경우 렌더링되지 않습니다.
ng-show의 경우 사용자는 Inspect Element 창을 열고 값을 TRUE로 설정할 수 있습니다.
그리고 으르렁거리면 숨겨야 할 전체 콘텐츠가 표시됩니다. 이는 보안 위반입니다.:)
언급URL : https://stackoverflow.com/questions/19177732/what-is-the-difference-between-ng-if-and-ng-show-ng-hide
'programing' 카테고리의 다른 글
| 파일에 MemoryStream 저장 및 로드 (0) | 2023.05.01 |
|---|---|
| CosmosDb에서 파티션 키에 /id를 사용하는 것의 의미 (0) | 2023.05.01 |
| Tkinter에서 두 프레임을 전환하시겠습니까? (0) | 2023.05.01 |
| 문자열에서 줄 바꿈을 제거하는 방법 (0) | 2023.05.01 |
| 4xx/5xx에 예외를 던지지 않는 PowerShell 웹 요청 (0) | 2023.05.01 |