AngularJS : ng-bind가 각도에서 {{}}보다 나은 이유는 무엇입니까?

나는 앵귤러 프레젠테이션 중 하나에 있었고 언급 된 회의에서 한 사람 ng-bind이 {{}}구속력 보다 낫습니다 .

이유 중 하나는 ng-bind변수를 감시 목록에 넣고 모델 변경이있을 때만 데이터를 보려고 밀어 넣을 {{}}때마다 매번 표현식을 보간하고 (각도 사이클이라고 생각합니다) 값이 변경 되었더라도 변경되지 않습니다.

또한 화면에 데이터가 많지 않으면 사용할 수 {{}}있으며 성능 문제가 표시되지 않는다고합니다. 누군가 나 에게이 문제에 대해 밝힐 수 있습니까?

를 사용하지 않는 경우 ng-bind대신 다음과 같이하십시오.

<div>
  Hello, {{user.name}}
</div>

실제 데이터가로드되기 전에 Hello, {{user.name}}1 초 전에 실제 user.name데이터가 표시 될 수 있습니다.

이런 식으로 할 수 있습니다

<div>
  Hello, <span ng-bind="user.name"></span>
</div>

그것이 당신에게 문제가된다면.

또 다른 해결책은을 사용하는 것 ng-cloak입니다.

시계:

angularjs가 부트 스트랩되는 동안 사용자는 html에서 괄호를 볼 수 있습니다. 로 처리 할 수 ​​있습니다 ng-cloak. 그러나 나에게 이것은 사용하는 경우 사용할 필요가없는 해결 방법 ng-bind입니다.

공연:

은 {{}}이다 훨씬 느리다 .

이것은 ng-bindA는 지시 와 전달 된 변수에 감시자를 배치합니다. 따라서 전달 된 값이 실제로 변경ng-bind 될 때만 적용됩니다 .

반면에 괄호가 될 것이다 더러운 검사 와 갱신 모든 $digest 그것의 경우에도 필요는 없습니다 .

현재 큰 단일 페이지 응용 프로그램을 작성 중입니다 (보기 당 ~ 500 바인딩). {{}}을 (를) 엄격으로 변경하면 ng-bind마다 약 20 %가 절약되었습니다 scope.$digest.

제안 :

angular-translate 와 같은 변환 모듈을 사용하는 경우 항상 괄호 주석보다 지시문 을 선호하십시오 .

{{'WELCOME'|translate}} => <span ng-translate="WELCOME"></span>

필터 기능이 필요한 경우 실제로는 사용자 정의 필터 만 사용하는 지시문을 사용하는 것이 좋습니다. $ filter 서비스 설명서

업데이트 28.11.2014 (아마 주제에서 벗어남 ) :

Angular 1.3x에는 bindonce기능이 도입되었습니다. 따라서 표현식 / 속성 값을 한 번 바인딩 할 수 있습니다 (! = 'undefined'인 경우 바인딩 됨).

바인딩이 변경되지 않을 때 유용합니다.

사용법 : ::바인딩하기 전에 배치하십시오.

<ul>  
  <li ng-repeat="item in ::items">{{item}}</li>
</ul>  
<a-directive name="::item">
<span data-ng-bind="::value"></span>

예:

ng-repeat행 당 여러 바인딩으로 테이블의 일부 데이터를 출력합니다. 모든 범위 다이제스트에서 실행되는 변환 바인딩, 필터 출력.

ng-bind ~보다 낫다 {{...}}

예를 들어 다음을 수행 할 수 있습니다.

<div>
  Hello, {{variable}}
</div>

전체 텍스트 것을이 수단 Hello, {{variable}}에 의해 둘러싸인이 <div>복사되어 메모리에 저장됩니다.

대신 다음과 같이하십시오.

<div>
  Hello, <span ng-bind="variable"></span>
</div>

값의 값만 메모리에 저장되며 각도는 변수로만 구성된 감시자 (watch expression)를 등록합니다.

기본적으로 이중 곱슬 구문은보다 자연스럽게 읽을 수 있으며 타이핑이 덜 필요합니다.

두 경우 모두 동일한 출력을 생성하지만, 계속 선택하면 템플릿이 각도로 렌더링되기 전에 {{}}사용자가 몇 밀리 초 동안 볼 가능성이 {{}}있습니다. 따라서 눈치 채면 사용하는 {{}}것이 좋습니다 ng-bind.

또한 매우 중요하다는 것은 각도 앱의 index.html에서만 렌더링 할 수 없다는 것 {{}}입니다. 지시문을 사용하여 템플릿을 사용하는 경우 각도가 먼저 템플릿을 렌더링하고 DOM에 추가하기 때문에 볼 수 없습니다.

{{...}}양방향 데이터 바인딩을 의미합니다. 그러나 ng-bind 는 실제로 단방향 데이터 바인딩을위한 것입니다.

ng-bind 를 사용하면 페이지의 감시자 수가 줄어 듭니다. 따라서 ng-bind 는보다 빠릅니다 {{...}}. 따라서 값과 해당 업데이트 만 표시하고 변경 사항을 UI에서 컨트롤러로 다시 반영하지 않으려면 ng-bind 로 이동하십시오 . 이렇게하면 페이지 성능이 향상되고 페이지로드 시간이 줄어 듭니다.

<div>
  Hello, <span ng-bind="variable"></span>
</div>

이것은 {{}}각도 컴파일러에서 2 개의 {{}}노드 를 병합 할 가능성이 있으므로 텍스트 노드와 부모를 모두 고려 하기 때문입니다 . 따라서로드 시간에 추가되는 추가 링커가 있습니다. 물론 그러한 경우에는 차이가 중요하지 않지만 많은 항목의 반복기 내에서 이것을 사용하면 런타임 환경이 느려질 수 있습니다.

Ng-Bind가 더 좋은 이유는

페이지가로드되지 않았거나 인터넷 속도가 느리거나 웹 사이트가 반만로드되면 이러한 유형의 문제 (읽기 표시가있는 스크린 샷 확인)가 완전히 이상한 화면에서 트리거되는 것을 볼 수 있습니다. 이를 피하기 위해 Ng-bind를 사용해야합니다

NG-바인드는 당신이 각 사용하려고 too.When의 문제가 필터 , 제한 당신이 사용하는 경우 또는 뭔가를, 당신은 아마 문제가있을 수 겨 - 바인딩 . 그러나 다른 경우에는 ng-bind 가 UX 쪽에서 더 좋습니다. 사용자가 페이지를 열면 기호 ( {{...}} ) 를 인쇄하는 (10ms-100ms)가 표시되므로 ng-bind가 더 좋습니다 .

{{}}에서 페이지를 새로 고칠 때와 같이 약간의 시간 표현 스팸이 나타나는 것처럼 깜박임 문제가 있으므로 데이터 표현을 위해 표현 대신 ng-bind를 사용해야합니다.

ng-bindhtml문자열로 나타 내기 때문에 더 안전 합니다.

예를 들어, '<script on*=maliciousCode()></script>'문자열로 표시되고 실행되지 않습니다.

Angular Doc에 따르면 : ngBind 는 요소 속성
이기 때문에 페이지가로드되는 동안 사용자가 바인딩을 볼 수 없게 만듭니다 ... 주요 차이점은 ...

기본적으로 모든 dom 요소가로드되지 않을 때까지 볼 수 없으며 ngBind 가 요소의 속성 이기 때문에 돔 이 작동 할 때까지 기다립니다 ... 더 자세한 정보는 아래

ngBind-
모듈 ng

의 지시문 ngBind 속성 은 AngularJS 에 지정된 HTML 요소의 텍스트 내용을 지정된 표현식의 값으로 바꾸고 해당 표현식의 값이 변경 될 때 텍스트 내용을 업데이트하도록 지시합니다.

일반적으로 ngBind를 직접 사용하지는 않지만 비슷하지만 덜 장황한 {{expression}} 과 같이 이중 곱슬 마크 업을 사용합니다 .

브라우저가 템플릿을 AngularJS가 컴파일하기 전에 기본적으로 원시 상태로 표시하는 경우 {{expression}} 대신 ngBind를 사용하는 것이 좋습니다. ngBind는 요소 속성이므로 페이지를로드하는 동안 바인딩이 사용자에게 표시되지 않습니다.

이 문제에 대한 대안 솔루션 은 ngCloak 지시문을 사용하는 것 입니다. 여기를 방문하십시오

ngbind 에 대한 자세한 내용을 보려면 다음 페이지를 방문하십시오. https://docs.angularjs.org/api/ng/directive/ngBind

ng-bind 속성으로 다음과 같은 작업을 수행 할 수 있습니다 .

<div ng-bind="my.name"></div>

또는 아래와 같이 보간을 수행하십시오.

<div>{{my.name}}</div>

또는 AngularJs에서 ng-cloak 속성을 사용하는이 방법 :

<div id="my-name" ng-cloak>{{my.name}}</div>

ng-cloak는 돔에서 번쩍 거리지 말고 모두 준비 될 때까지 기다리십시오! 이것은 ng-bind 속성 과 같습니다 ...

이 사이트를 참조하면 {{}}이 (가) ng-bind보다 느리다는 것을 알 수 있습니다.

http://corpus.hubwiz.com/2/angularjs/16125872.html 이 사이트를 참조하십시오.