언제-만약 vs. ng-show/ng-hide를 선호해야 합니까?

언제-만약 vs. ng-show/ng-hide를 선호해야 합니까?

는 그것을 합니다.ng-show그리고.ng-hide과 해당 클래스 을 줍니다.ng-if요소가 DOM의 일부로 렌더링되는지 여부를 제어합니다.

선택에 대한 지침이 있습니까?ng-if1파운드가 ng-show/ng-hide아니면 그 반대?

사용 사례에 따라 다르지만 차이점을 요약하면 다음과 같습니다.

1. ng-ifDOM에서 요소를 제거합니다.즉, 해당 요소에 연결된 모든 핸들러 또는 기타 모든 핸들러가 손실됩니다.를 들어, 핸들러를 요소 중에는 " " " " 를 사용합니다.ng-ifFalse로 평가되면 해당 요소가 DOM에서 제거되고 클릭 핸들러가 더 이상 작동하지 않습니다.ng-if나중에 true로 평가되고 요소가 표시됩니다.처리기를 다시 연결해야 합니다.
2. ng-show/ng-hideDOM에서 요소를 제거하지 않습니다.CSS 스타일을 사용하여 요소를 숨기거나 표시합니다(참고: 자신의 클래스를 추가해야 할 수 있음).이렇게 하면 어린이에게 부착된 핸들러가 손실되지 않습니다.
3. ng-if하는 동안 "는 하위 범위를 생성합니다.ng-show/ng-hide 않음

영향이 DOM을 할 때 웹이 더 수 .ng-if와비여하와 ng-show/ng-hide제 경험상, 그 차이는 무시해도 될 정도입니다.두 가지를 모두 사용할 때 애니메이션이 가능합니다.ng-show/ng-hide그리고.ng-ifAngular(각도) 설명서의 두 가지 예를 모두 참조하십시오.

궁극적으로, 당신이 대답해야 할 질문은 DOM에서 요소를 제거할 수 있는지 여부입니다.

ng-if/ng-show가 DOM별로 작동하는 방식의 차이를 보여주는 CodePen은 여기를 참조하십시오.

@크누크사노비치는 그 질문에 잘 대답했습니다.하지만 저는 다른 관점에서 접근할 것입니다.항상 사용하곤 했습니다.ng-if같은를 제외하고 합니다.

1. 과 데이터 합니다.$watch-es는 보이지 않는 동안 활성화된 상태를 유지합니다.전체 양식이 유효한지 여부를 확인하기 위해 현재 표시되지 않는 입력에 대한 유효성을 확인하려면 양식이 좋은 경우가 될 수 있습니다.
2. 당신은 위에서 언급한 것처럼 조건부 이벤트 핸들러와 함께 매우 정교한 상태 저장 논리를 사용하고 있습니다.즉, ng-if를 사용할 때 중요한 상태가 손실되는 것처럼 핸들러를 수동으로 연결하고 분리하는 경우 해당 상태가 데이터 모델에 더 잘 표현되는지 자문하고 요소가 렌더링될 때마다 핸들러가 지시어에 의해 조건부로 적용되는지 자문합니다.즉, 핸들러의 존재/존재는 상태 데이터의 한 형태입니다.데이터를 DOM에서 모델로 가져옵니다.핸들러의 존재/존재는 데이터에 의해 결정되어야 하므로 재생성이 용이합니다.

Angular는 정말 잘 쓰여져 있습니다.그것은 그것이 하는 것을 고려할 때 빠릅니다.하지만 이것이 하는 일은 (2방향 데이터 바인딩과 같은) 어려운 것들을 아주 쉽게 보이게 하는 마법의 묶음입니다.이러한 모든 것을 쉽게 보이게 하려면 성능 오버헤드가 발생합니다.당신은 세터 함수가 몇 백 번 또는 수천 번 평가되는지 알면 충격을 받을 수 있습니다.$digest아무도 보지도 않는 DOM을 주기적으로 반복합니다.그리고 나서 여러분은 수십 또는 수백 개의 보이지 않는 요소들이 모두 같은 일을 하고 있다는 것을 깨닫게 됩니다.

데스크톱은 대부분의 JS 실행 속도 문제를 완화할 수 있을 정도로 강력합니다.하지만 모바일용으로 개발 중이라면, 인간이 가능할 때마다 ng-if를 사용하는 것은 어렵지 않을 것입니다.JS 속도는 여전히 모바일 프로세서에서 중요합니다.ng-if를 사용하는 것은 매우 저렴한 비용으로 잠재적으로 중요한 최적화를 얻을 수 있는 매우 쉬운 방법입니다.

내 경험에 비추어 볼 때:

페이지에 ng-if/ng-show를 사용하여 무언가를 표시/숨기는 토글이 있는 경우 ng-if는 브라우저 지연(느림)을 더 유발합니다.예를 들어, 두 보기 사이를 전환하는 데 사용되는 버튼이 있다면 ng-show가 더 빠른 것 같습니다.

ng-if는 true/false로 평가될 때 범위를 생성/해제합니다.ng-if에 연결된 컨트롤러가 있으면 ng-if가 true로 평가될 때마다 해당 컨트롤러 코드가 실행됩니다.ng-show를 사용하는 경우 컨트롤러 코드는 한 번만 실행됩니다.따라서 여러 보기를 전환하는 버튼이 있는 경우 ng-if와 ng-show를 사용하면 컨트롤러 코드를 작성하는 방법에 큰 차이가 있습니다.

답은 간단하지 않습니다.

대상 시스템(모바일 시스템과 데스크톱 시스템)에 따라 다르며, 데이터의 특성, 브라우저, OS, 실행되는 하드웨어에 따라 다릅니다.정말로 알고 싶다면 벤치마킹을 해야 할 것입니다.

대부분 메모리 대 계산 문제입니다. 대부분의 성능 문제와 마찬가지로 목록과 같은 요소(n)가 반복될 경우(특히 nxn 이상), 이러한 요소 내에서 실행되는 계산의 종류가 다를 수 있습니다.

• ng-show: 90%와 같이 옵션 요소가 자주 있는 경우(밀도가 높은 경우), 특히 콘텐츠가 저렴한 경우(일반 텍스트만, 계산하거나 로드할 것이 없는 경우)에는 해당 요소를 준비하고 표시/숨기는 것이 더 빠를 수 있습니다.이는 숨겨진 요소로 DOM을 채우기 때문에 메모리를 소비하지만 이미 존재하는 것을 표시/숨기기만 하면 브라우저에 저렴한 작업이 될 수 있습니다.

• ng-if: 반대로 요소가 표시되지 않을 가능성이 높은 경우(희소), 특히 콘텐츠(계산/정렬/필터링, 이미지, 생성된 이미지)를 실시간으로 구축하고 파괴합니다.이것은 희귀하거나 '주문형' 요소에 이상적이며, DOM을 채우지 않는다는 측면에서 메모리를 절약하지만, 많은 계산(요소 생성/파괴)과 대역폭(원격 콘텐츠 가져오기)이 소요될 수 있습니다.또한 뷰(필터링/정렬)에서 계산하는 양과 모델에 이미 있는 양(사전 정렬/사전 필터링된 데이터)에 따라 달라집니다.

한 가지 중요한 사항:

ngIf(show와 달리)는 일반적으로 예기치 않은 결과를 생성할 수 있는 하위 범위를 만듭니다.

저는 이와 관련된 문제가 있었고 무슨 일이 일어나고 있는지 알아내기 위해 많은 시간을 보냈습니다.

(제 지시는 모델 값을 잘못된 범위에 쓰는 것이었습니다.)

그래서 머리를 아끼려면 너무 느리게 뛰지 않는 한 그냥 ingShow를 사용하세요.

어쨌든 성능 차이는 거의 눈에 띄지 않으며 테스트 없이 누가 선호하는지는 아직 확실하지 않습니다.

사용하는 경우ng-show or ng-hide내용(예: 서버의 미리 보기)은 식 값에 관계없이 로드되지만 식 값을 기준으로 표시됩니다.

사용하는 경우ng-if.ng -iff의 true로 됩니다.

서버에서 데이터 또는 이미지를 로드하고 사용자 상호 작용에만 따라 표시할 경우 ng-if를 사용하는 것이 좋습니다.이렇게 하면 불필요한 새로운 작업으로 인해 페이지 로드가 차단되지 않습니다.

ng-fong-include 및 on-controller는 ng에 큰 영향을 미칠 것입니다. ng-fong-include 및 ong-controller는 필요한 부분을 로드하지 않으며 ng-clude 플래그가 참인 경우가 아니면 컨트롤러를 로드하지 않지만 문제는 플래그가 거짓이 되는 경우 플래그가 다시 True가 되었을 때 DOM에서 제거됩니다.이 경우의 DOM은 ng-show가 더 낫습니다. 한 번은 ng-if가 더 낫다는 것을 보여줍니다.

언급URL : https://stackoverflow.com/questions/21869283/when-to-favor-ng-if-vs-ng-show-ng-hide