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

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

---

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/

여러분 중 일부는 앵귤러 배타 랑을 사용하고있을 수 있습니다. 주석에서 언급했듯이이 지시문을 사용하면 요소가 바인딩으로 표시되지 않는 경우에도 여전히 바인딩으로 표시됩니다. 저는 이것이 요소에 연결된 클래스와 관련이 있다고 확신합니다. 이것을 시도하면 작동합니다 (테스트되지 않음) . 그것이 당신에게 효과가 있다면 의견으로 알려주십시오.

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

---

Comparison between @OverZealous and @Connor answers :

With the traditional ngRepeat of angular : 15s for 2000 rows and 420mo of RAM (Plunker)

With ngRepeat and the module of @OverZealous : 7s for 2000 rows and 240mo of RAM(Plunker)

With ngRepeat and the directive of @Connor : 8s for 2000 rows and 500mo of RAM (Plunker)

I made my tests with Google Chrome 32.

---

As an alternative, there is angular-once package:

If you use AngularJS, have performance issues and need to display lots of readonly data, this project is for you!

angular-once was actually inspired by bindonce and provides similar once-* attributes:

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

참고URL : https://stackoverflow.com/questions/18790333/render-value-without-data-binding