ng-show / -hide의 대안 또는 DOM의 관련 섹션 만로드하는 방법

ng-show / -hide의 대안 또는 DOM의 관련 섹션 만로드하는 방법

---

ng-show / -hide를 사용하면 해당 블록에 포함 된 콘텐츠가 처음에 사용자 화면에 표시됩니다. angular.js가로드되고 실행 된 후 몇 밀리 초 후에 만 ​​ng-show에 올바른 블록이 표시됩니다.

ng-show / -hide보다 관련 데이터 섹션 만 DOM에로드하는 더 좋은 방법이 있습니까?

ng-view의 문제점은 페이지에 하나만있을 수 있으므로 현재 상태에 따라 DOM의 여러 섹션 동작을 전환해야한다는 것입니다.

---

"컴파일되지 않은 콘텐츠의 플래시"를 방지하려면 ng-cloak 대신 ng-bind 를 {{}}사용하거나 ng-cloak을 사용 하세요.

<span ng-cloak ng-show="show">Hello, {{name}}!</span>

ng-cloak을 사용하고 HTML의 헤드 섹션에 Angular.js를로드하지 않은 경우이를 CSS 파일에 추가하고 페이지 상단에로드되는지 확인해야합니다.

[ng\:cloak], [ng-cloak], .ng-cloak { display: none; }

이러한 지시문은 초기 페이지에서만 사용하면됩니다. 나중에 가져 오는 콘텐츠 (예 : ng-include, ng-view 등)는 브라우저가 렌더링되기 전에 Angular에 의해 컴파일됩니다.

관련 섹션 만 DOM에로드되는 ng-show / hide 이외의 데이터를로드하는 더 좋은 방법이 있습니까?

ng-show / ng-hide의 일부 대안은 ng-include , ng-switch 및 (v1.1.5부터) ng-if입니다 .

<div ng-include src="someModelPropertySetToThePartialYouWantToLoadRightNow"></div>

ng-include와 함께 작동하는 ng-switch의 예 는 https://stackoverflow.com/a/12584774/215945 를 참조하십시오 .

ng-switch 및 ng-if DOM 요소를 추가 / 제거하는 반면 ng-show / hide는 CSS 만 변경합니다 (중요한 경우).

---

ng-cloak 트릭을 사용했는데 제대로 작동하지 않는 것 같습니다. Angular 문서에 따라 CSS에 다음을 추가했으며 작동합니다.

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
}

참조 : http://docs.angularjs.org/api/ng.directive:ngCloak

---

Mark Rajcok의 훌륭한 대답에 따르면 여기에 ng-show, ng-switch 및 ng-if 작동을 보여주는 CodePen이 있으므로 접근 방식을 비교하고 조건부 콘텐츠가 실제로 렌더링되는 방식의 차이점을 확인할 수 있습니다.

일부 사람들은 ng-show가 파일 기반 템플릿의 ng-switch 및 ng-if보다 조금 더 빠르다고 생각합니다. 하지만 $ templateCache 를 사용 하여 부트 스트랩 시간에 템플릿 을 미리로드하여 이점을 줄이거 나 없앨 수 있습니다. ng-switch 및 ng-if를 사용하면 더 이상 필요하지 않을 때 DOM에있는 숨겨진 조건부 콘텐츠를 처리 할 필요가 없으며 해당 콘텐츠에 대한 표현식이 부적절한시기에 Angular에서 평가되는 것을 방지 할 수 있습니다. 이를 통해 낭비 할 필요가없는 처리 리소스를 절약하고 무언가가 조기에 평가 될 때 발생할 수있는 오류를 방지 할 수 있습니다.

참조 URL : https://stackoverflow.com/questions/14068711/alternative-to-ng-show-hide-or-how-to-load-only-relevant-section-of-dom