데이터 바인딩없이 값 렌더링

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이 사용 가능 해지면 설정되지만 시계는 비활성화됩니다.

@OverZealous와 @Connor 답변 비교 :

기존 ngRepeat of angular : 2000 행의 경우 15 초, RAM의 420mo ( 플 런커 )

ngRepeat 및 @OverZealous 모듈 사용 : 2000 행에 7 초, RAM 240mo ( Plunker )

ngRepeat 및 @Connor 지시문 사용 : 2000 행의 경우 8 초, RAM의 500mo ( Plunker )

Google Chrome 32로 테스트했습니다.

대안으로 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>