Wert ohne Datenbindung rendern

Wie kann ich in AngularJS einen Wert ohne bidirektionale Datenbindung rendern? Möglicherweise möchten Sie dies aus Leistungsgründen tun oder sogar einen Wert zu einem bestimmten Zeitpunkt rendern.

In den folgenden Beispielen wird die Datenbindung verwendet:

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

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

Wie rendere ich value ohne Datenbindung?

Winkel 1,3+

In 1.3 hat Angular dies mithilfe der folgenden Syntax unterstützt.

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

Wie in dieser Antwort erwähnt .

Winkel 1.2 und darunter

Dies ist einfach und benötigt kein Plugin. Überprüfen Sie dies heraus.

Diese kleine Richtlinie wird leicht das erreichen, was Sie erreichen wollen

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

Sie können einmal so binden

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

Sie können wie gewohnt binden

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

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

Einige von Ihnen verwenden möglicherweise eckigen Batarang, und wie in den Kommentaren erwähnt, wird das Element, wenn Sie diese Direktive verwenden, immer noch als verbindlich angezeigt, wenn dies nicht der Fall ist. Ich bin mir ziemlich sicher, dass dies etwas mit den Klassen zu tun hat, die an das Element angehängt sind Versuchen Sie dies, es sollte funktionieren (nicht getestet) . Lassen Sie mich in den Kommentaren wissen, ob es für Sie funktioniert hat.

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

@ x0b : Wenn Sie eine Zwangsstörung haben und das leere classAttribut entfernen möchten, tun Sie dies

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

Es sieht so aus, als ob Angular 1.3 (beginnend mit Beta 10) eine einmalige Bindung eingebaut hat:

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

Einmalige Bindung

Ein Ausdruck, der mit :: beginnt, wird als einmaliger Ausdruck betrachtet. Einmalige Ausdrücke werden nicht mehr neu berechnet, sobald sie stabil sind. Dies geschieht nach dem ersten Digest, wenn das Ausdrucksergebnis ein nicht undefinierter Wert ist (siehe Wertstabilisierungsalgorithmus unten).

Verwenden Sie das Bindonce-Modul . Sie müssen die JS-Datei einschließen und als Abhängigkeit zu Ihrem App-Modul hinzufügen:

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

Mit dieser Bibliothek können Sie Elemente rendern, die nur einmal gebunden sind - wenn sie zum ersten Mal initialisiert werden. Alle weiteren Aktualisierungen dieser Werte werden ignoriert. Dies ist eine großartige Möglichkeit, die Anzahl der Uhren auf der Seite für Dinge zu reduzieren, die sich nach dem Rendern nicht ändern.

Anwendungsbeispiel:

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

Bei einer solchen Verwendung wird die Eigenschaft unter valuefestgelegt, sobald sie verfügbar ist. Anschließend wird die Uhr deaktiviert.

Vergleich zwischen @OverZealous und @Connor Antworten:

Mit dem traditionellen ngRepeat von Angular: 15s für 2000 Zeilen und 420mo RAM ( Plunker )

Mit ngRepeat und dem Modul von @OverZealous: 7s für 2000 Zeilen und 240Mo RAM ( Plunker )

Mit ngRepeat und der Direktive von @Connor: 8s für 2000 Zeilen und 500Mo RAM ( Plunker )

Ich habe meine Tests mit Google Chrome 32 durchgeführt.

Als Alternative gibt es angular-oncePaket:

Wenn Sie AngularJS verwenden, Leistungsprobleme haben und viele schreibgeschützte Daten anzeigen müssen, ist dieses Projekt genau das Richtige für Sie!

angular-oncewurde tatsächlich inspiriert bindonceund bietet ähnliche once-*Attribute:

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