[angularjs] angular.js가 문서를 컴파일 / 보간하기 전에 이중 중괄호 표기법이 일시적으로 표시되지 않도록 방지

로드 할 이미지 / 스크립트가 많을 때 주로 IE에서 문제가되는 것 같습니다 {{stringExpression}}. 마크 업 의 리터럴 이 표시 되는 시간이 충분 할 수 있습니다. 각각의 컴파일 / 보간으로 각도가 완료되면 사라집니다. 문서.

이것이 일반적으로 잘못된 일을하고 있음을 나타내는 일반적인 이유가 있습니까, 아니면 이것을 방지하는 알려진 방법이 있습니까?

답변

나는 당신이 ngCloak지시문을 찾고 있다고 생각합니다 : https://docs.angularjs.org/api/ng/directive/ngCloak

설명서에서 :

ngCloak 지시문은 응용 프로그램이로드되는 동안 브라우저에서 Angular html 템플릿이 원시 (컴파일되지 않은) 형식으로 잠깐 표시되지 않도록하는 데 사용됩니다. 이 지시문을 사용하여 html 템플릿 표시로 인한 원하지 않는 깜박임 효과를 피하십시오.

지시문은 <body>요소에 적용될 수 있지만 선호되는 사용법은 ngCloak
페이지의 작은 부분에 여러 지시문을 적용 하여 브라우저보기를 점진적으로 렌더링하는 것입니다.

답변

또한 <span ng-bind="hello"></span>대신에 사용할 수 있습니다 {{hello}}.

http://jsfiddle.net/4LhN9/34/

답변

스크립트가 마지막으로로드 될 때 class = ‘ng-cloak’접근 방식의 효과를 향상 시키려면 다음 css가 문서 헤드에로드되어 있는지 확인하십시오.

.ng-cloak { display:none; }

답변

클로킹 CSS를 페이지 헤드 또는 CSS 파일 중 하나에 추가하십시오.

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

그런 다음 일반적인 Angular 연습에 따라 ngCloak 지시문을 사용할 수 있으며 Angular 자체가로드되기 전에도 작동합니다.

angular.js의 끝에있는 코드는 위의 CSS 규칙을 페이지 헤드에 추가합니다.

답변

CSS에서 다음을 추가하십시오.

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

그런 다음 코드에서 ng-cloak 지시문을 추가 할 수 있습니다. 예를 들어

<div ng-cloak>
   Welcome {{data.name}}
</div>

그게 다야!

답변

ng-attr-src="{{variable}}"대신에 사용할 수도 있으며 src="{{variable}}"컴파일러가 템플릿을 컴파일 한 후에 만 속성이 생성됩니다. https://docs.angularjs.org/guide/directive#-ngattr-attribute-bindings 문서에서 여기에 언급되어 있습니다.

답변

@ pkozlowski.opensource 답변에 동의하지만 ng-clock 클래스는 ng-repeat와 함께 사용할 수 없습니다. 따라서 {{name}} 및 ngCloak 지시문과 같은 간단한 구분 기호 식에 ng-repeat에 클래스를 사용하는 것이 좋습니다.

<div class="ng-cloak">{{name}}<div>

과

<li ng-repeat="item in items" ng-cloak>{{item.name}}<li>