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

298

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

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

angularjs

— 제레미
소스

6

도움이 될 수 있습니다 : branchandbound.net/blog/web/2013/08/some-angularjs-pitfalls

— Ismael

위의 해결책은 올바른 해결책이었습니다

— Edmund Rojas

283

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

설명서에서 :

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

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

— pkozlowski.opensource
소스

1

원시 Angular HTML 코드를 피하려면 ngCloak널리 보급 / 모범 사례가 있습니까? 더 똑똑하지 않은 것 같지만 AngularJS에는 경험이 없습니다.

— 케빈 메러디스

32

본문 끝에 모든 스크립트를로드하면 이것이 효과가 있다고 생각하지 않습니다.

— trusktr

8

Aaah, wait, nvm, LOAS의 대답은 스크립트를 마지막으로로드하면 해결책입니다. .ng-cloak 클래스를 사용하십시오.

— trusktr

3

<head>html 섹션에 angularjs 스크립트를로드 ngCloak하면 효과적입니다.

— Mustafa

1

나는로드하는 경우가 완벽하게 작동 확인할 수 있습니다 angular.js에서 <head>내 페이지의 섹션을 참조하십시오.

— Aron Lorincz

197

또한 대신에 사용할 수 있습니다 {{hello}}.

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

— 앤드류 조슬린
소스

94

때때로 간과되는 ng-bind의 한 가지 특징은 Angular가로드되는 동안 표시 할 텍스트를 지정할 수 있다는 것입니다 : loading ... . "로드 중 ..."이 나타나면 myScopeProperty가 정의되면 바뀝니다.

— Mark Rajcok

@MarkRajcok : 팁 주셔서 감사합니다! 나는 몰랐다. 그것은 매우 간단하고 우아하며 내가 가진 문제를 해결합니다.

— Jim Raden

9

여러 개의 표현식이 필요한 경우 ngBindTemplate을 사용하십시오. 예 : 로드 중 ...

— Mark Rajcok

27

— Andrew Joslin

5

@ 앤디 조슬린 니스. 이 방법을 사용하면 페이지가로드 될 때 {{}} 표현식이 깜박이지 않도록 페이지 아래쪽이 아니라 각도 js 스크립트가 헤드에 있어야합니다.

— s_t_e_v_e

51

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

.ng-cloak { display:none; }

— LOAS
소스

4

! 중요한 것을 추가하는 것도 나쁜 생각이 아닙니다.

— eomeroff

12

visibility: hidden더 좋지 않을까요 ?

— mpen December

2

@ eomeroff이지만 스타일을 선택 !important하는 CSS 해킹 (나쁜 것)입니까? CSS 선택기 규칙을 위반합니다.

— 케빈 메러디스

5

IMHO 이것은! important가 소개 된 사례 중 하나입니다.

— lex82

3

@Mark "visibility : hidden"은 여전히 템플릿 마크 업에 필요한 공간을 렌더링하지만 "display : none"은 아무것도 렌더링하지 않는다고 생각합니다. 가시성 만 숨기면 외부 요소가 크기에서 커지지 않고 갑자기 실제 내부 크기로 축소 될 수 있습니다. 나는 그것이 원하는 것을 가정합니다. :)

— James Wilkins

40

클로킹 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 규칙을 페이지 헤드에 추가합니다.

— 베넷 맥 엘위
소스

+1 [ngcloak]셀렉터를 직접 생각해 보았지만이 방법이 더 완벽합니다.

— Pierre Henry

1

멋진 답변! 본문 끝에 Angular를로드하므로 ngCloak을 사용할 수 없으며 여전히 {{}}이 (가) 깜박입니다. 이것은 그것을 고쳤다.

— Scottie

21

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>

그게 다야!

— 나단 세네 브라스 네
소스

6

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

— 마틴 슐러
소스

3

@ 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>

— 제이슨
소스

실수를 알아 주셔서 감사합니다

— Jaison