로드 할 이미지 / 스크립트가 많을 때 주로 IE에서 문제가되는 것 같습니다 {{stringExpression}}
. 마크 업 의 리터럴 이 표시 되는 시간이 충분 할 수 있습니다. 각각의 컴파일 / 보간으로 각도가 완료되면 사라집니다. 문서.
이것이 일반적으로 잘못된 일을하고 있음을 나타내는 일반적인 이유가 있습니까, 아니면 이것을 방지하는 알려진 방법이 있습니까?
답변
나는 당신이 ngCloak
지시문을 찾고 있다고 생각합니다 : https://docs.angularjs.org/api/ng/directive/ngCloak
설명서에서 :
ngCloak 지시문은 응용 프로그램이로드되는 동안 브라우저에서 Angular html 템플릿이 원시 (컴파일되지 않은) 형식으로 잠깐 표시되지 않도록하는 데 사용됩니다. 이 지시문을 사용하여 html 템플릿 표시로 인한 원하지 않는 깜박임 효과를 피하십시오.
지시문은
<body>
요소에 적용될 수 있지만 선호되는 사용법은ngCloak
페이지의 작은 부분에 여러 지시문을 적용 하여 브라우저보기를 점진적으로 렌더링하는 것입니다.
답변
답변
스크립트가 마지막으로로드 될 때 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>