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

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

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

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

ng-view의 문제는 페이지에 1개밖에 표시되지 않기 때문에 현재 상태에 따라 DOM의 여러 섹션의 동작을 전환해야 한다는 것입니다.

"컴파일되지 않은 콘텐츠의 플래시"를 방지하려면 다음 명령 대신 ng-bind를 사용합니다.{{}}또는 ng-module을 사용합니다.

<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-switch 와 ng-switch 가 ng-switch 와 함께 동작하는 예에 대해서는, https://stackoverflow.com/a/12584774/215945 도 참조해 주세요.

ng-switch 및 ng-iff add/remove DOM 요소는 ng-switch 및 ng-iff-remove이며 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 action을 보여주는 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