Wartość renderowania bez wiązania danych

W AngularJS, jak mogę renderować wartość bez dwukierunkowego wiązania danych? Można to zrobić ze względu na wydajność, a nawet renderowanie wartości w danym momencie.

Poniższe przykłady używają powiązania danych:

<div>{{value}}</div>

<div data-ng-bind="value"></div>

Jak renderować value bez powiązania danych?

Angular 1.3+

W wersji 1.3 Angular obsługiwał to przy użyciu następującej składni.

<div>{{::message}}</div>

Jak wspomniano w tej odpowiedzi .

Kątowy 1.2 i niższy

Jest to proste i nie wymaga wtyczki. Sprawdź to.

Ta niewielka dyrektywa z łatwością osiągnie to, co próbujesz osiągnąć

app.directive('bindOnce', function() {
    return {
        scope: true,
        link: function( $scope ) {
            setTimeout(function() {
                $scope.$destroy();
            }, 0);
        }
    }
});

Możesz raz związać się w ten sposób

<div bind-once>I bind once - {{message}}</div>

Możesz wiązać jak zwykle

<div ng-bind="message" bind-once></div>

Demo: http://jsfiddle.net/fffnb/

Niektórzy z was mogą używać kątowego batarangu i jak wspomniano w komentarzach, jeśli używasz tej dyrektywy, element nadal wyświetla się jako wiążący, gdy nie jest, jestem prawie pewien, że ma to coś wspólnego z klasami, które są dołączone do elementu, więc spróbuj tego, powinno działać (nie testowane) . Daj mi znać w komentarzach, czy to zadziałało.

app.directive('bindOnce', function() {
    return {
        scope: true,
        link: function( $scope, $element ) {
            setTimeout(function() {
                $scope.$destroy();
                $element.removeClass('ng-binding ng-scope');
            }, 0);
        }
    }
});

@ x0b : Jeśli masz OCD i chcesz usunąć pusty classatrybut, zrób to

!$element.attr('class') && $element.removeAttr('class')

Wygląda na to, że Angular 1.3 (zaczynając od beta 10) ma wbudowane jednorazowe powiązanie:

https://docs.angularjs.org/guide/expression#one-time-binding

Jednorazowe wiązanie

Wyrażenie zaczynające się od :: jest uważane za wyrażenie jednorazowe. Wyrażenia jednorazowe przestaną się ponownie obliczać, gdy staną się stabilne, co ma miejsce po pierwszym podsumowaniu, jeśli wynik wyrażenia jest wartością nieokreśloną (patrz algorytm stabilizacji wartości poniżej).

Użyj modułu bindonce . Musisz dołączyć plik JS i dodać go jako zależność do modułu aplikacji:

var myApp = angular.module("myApp", ['pasvaz.bindonce']);

Ta biblioteka umożliwia renderowanie elementów, które są powiązane tylko raz - podczas pierwszej inicjalizacji. Wszelkie dalsze aktualizacje tych wartości będą ignorowane. To świetny sposób na zmniejszenie liczby obserwowanych na stronie elementów, które nie ulegną zmianie po wyrenderowaniu.

Przykład użycia:

<div bo-text="value"></div>

W takim przypadku właściwość poniżej valuezostanie ustawiona, gdy będzie dostępna, ale wtedy zegarek zostanie wyłączony.

Porównanie odpowiedzi @OverZealous i @Connor:

Z tradycyjnym ngRepeat of angular: 15s dla 2000 rzędów i 420mo pamięci RAM ( Plunker )

Z ngRepeat i modułem @OverZealous: 7s dla 2000 wierszy i 240mo pamięci RAM ( Plunker )

Z ngRepeat i dyrektywą @Connor: 8s dla 2000 wierszy i 500mo pamięci RAM ( Plunker )

Przeprowadziłem testy w Google Chrome 32.

Jako alternatywę dostępny jest angular-oncepakiet:

Jeśli używasz AngularJS, masz problemy z wydajnością i potrzebujesz wyświetlać dużo danych tylko do odczytu, ten projekt jest dla Ciebie!

angular-oncezostał zainspirowany bindoncei zapewnia podobne once-*cechy:

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