나는 앵귤러 프레젠테이션 중 하나에 있었고 언급 된 회의에서 한 사람 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를 사용해야합니다
