AngularJS에서 양방향 데이터 바인딩없이 값을 어떻게 렌더링 할 수 있습니까? 성능상의 이유로이 작업을 수행하거나 특정 시점에서 값을 렌더링 할 수도 있습니다.
다음 예제는 모두 데이터 바인딩을 사용합니다.
<div>{{value}}</div>
<div data-ng-bind="value"></div>
데이터 바인딩 value 없이 어떻게 렌더링 합니까?
답변
Angular 1.3 이상
1.3에서 Angular는 다음 구문을 사용하여이를 지원했습니다.
<div>{{::message}}</div>
이 답변 에서 언급했듯이 .
Angular 1.2 이하
이것은 간단하며 플러그인이 필요하지 않습니다. 이것 좀 봐.
이 작은 지침은 달성하려는 것을 쉽게 달성 할 수 있습니다.
app.directive('bindOnce', function() {
return {
scope: true,
link: function( $scope ) {
setTimeout(function() {
$scope.$destroy();
}, 0);
}
}
});
이렇게 한 번 묶을 수 있습니다
<div bind-once>I bind once - {{message}}</div>
평소처럼 묶을 수 있습니다
<div ng-bind="message" bind-once></div>
데모 : http://jsfiddle.net/fffnb/
여러분 중 일부는 angular batarang을 사용하고있을 수 있습니다. 주석에서 언급했듯이이 지시문을 사용하면 요소가 바인딩되지 않은 경우 여전히 바인딩으로 표시됩니다. 이것은 요소에 연결된 클래스와 관련이 있다고 확신합니다. 이것을 시도하면 작동합니다 (테스트되지 않음) . 그것이 당신을 위해 일했다면 의견으로 알려주십시오.
app.directive('bindOnce', function() {
return {
scope: true,
link: function( $scope, $element ) {
setTimeout(function() {
$scope.$destroy();
$element.removeClass('ng-binding ng-scope');
}, 0);
}
}
});
@ x0b : OCD가 있고 빈 class속성 을 제거하려면 다음을 수행하십시오.
!$element.attr('class') && $element.removeAttr('class')
답변
Angular 1.3 (베타 10부터 시작)에는 일회성 바인딩이 내장되어 있습니다.
https://docs.angularjs.org/guide/expression#one-time-binding
일회성 바인딩
::로 시작하는 식은 일회성 식으로 간주됩니다. 일회성 표현식은 안정되면 재 계산을 중지합니다. 표현식 결과가 정의되지 않은 값인 경우 첫 번째 다이제스트 이후에 발생합니다 (아래 값 안정화 알고리즘 참조).
답변
bindonce 모듈을 사용하십시오 . JS 파일을 포함하고이를 앱 모듈에 대한 종속성으로 추가해야합니다.
var myApp = angular.module("myApp", ['pasvaz.bindonce']);
이 라이브러리를 사용하면 처음 초기화 될 때 한 번만 바인딩 된 항목을 렌더링 할 수 있습니다. 이러한 값에 대한 추가 업데이트는 무시됩니다. 렌더링 된 후 변경되지 않는 항목에 대한 페이지의 시계 수를 줄이는 좋은 방법입니다.
사용 예 :
<div bo-text="value"></div>
이렇게 사용하면 아래 속성 value이 사용 가능 해지면 설정되지만 시계는 비활성화됩니다.
답변
답변
대안으로 angular-once패키지가 있습니다.
AngularJS를 사용하고 성능 문제가 있고 많은 읽기 전용 데이터를 표시해야하는 경우이 프로젝트가 적합합니다!
angular-once실제로 영감을 받았으며 bindonce유사한 once-*속성을 제공 합니다.
<ul>
<li ng-repeat="user in users">
<a once-href="user.profileUrl" once-text="user.name"></a>
<a once-href="user.profileUrl"><img once-src="user.avatarUrl"></a>
<div once-class="{'formatted': user.description}" once-bind="user.description"></div>
</li>
</ul>
답변
