Valore di rendering senza associazione dati

In AngularJS, come posso eseguire il rendering di un valore senza data binding a 2 vie? Si potrebbe desiderare di farlo per motivi di prestazioni, o anche per rendere un valore in un dato momento.

I seguenti esempi utilizzano entrambi l'associazione dati:

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

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

Come eseguo il rendering value senza alcuna associazione di dati?

Angular 1.3+

In 1.3, Angular lo ha supportato utilizzando la seguente sintassi.

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

Come accennato in questa risposta .

Angolare 1.2 e inferiore

Questo è semplice e non necessita di plugin. Controllalo.

Questa piccola direttiva realizzerà facilmente ciò che stai cercando di ottenere

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

Puoi legare una volta in questo modo

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

Puoi legarti come al solito

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

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

Alcuni di voi potrebbero usare il batarang angolare e, come menzionato nei commenti, se usate questa direttiva l'elemento si mostra ancora come vincolante quando non lo è, sono abbastanza sicuro che questo abbia qualcosa a che fare con le classi che sono attaccate all'elemento quindi prova questo, dovrebbe funzionare (non testato) . Fammi sapere nei commenti se ha funzionato per te.

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

@ x0b : se hai un disturbo ossessivo compulsivo e desideri rimuovere l' classattributo vuoto, fallo

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

Sembra che Angular 1.3 (a partire dalla beta 10) abbia l'associazione una tantum incorporata:

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

Rilegatura una tantum

Un'espressione che inizia con :: è considerata un'espressione occasionale. Le espressioni occasionali interromperanno il ricalcolo una volta che sono stabili, cosa che accade dopo il primo digest se il risultato dell'espressione è un valore non indefinito (vedere l'algoritmo di stabilizzazione del valore di seguito).

Usa il modulo bindonce . Dovrai includere il file JS e aggiungerlo come dipendenza al modulo dell'app:

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

Questa libreria consente di eseguire il rendering di elementi associati solo una volta, quando vengono inizializzati per la prima volta. Eventuali ulteriori aggiornamenti a tali valori verranno ignorati. È un ottimo modo per ridurre il numero di visualizzazioni sulla pagina per cose che non cambieranno dopo il rendering.

Esempio di utilizzo:

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

Quando viene utilizzato in questo modo, la proprietà sotto valueverrà impostata una volta che è disponibile, ma l'orologio verrà disabilitato.

Confronto tra le risposte @OverZealous e @Connor:

Con il tradizionale ngRepeat di angular: 15s per 2000 file e 420mo di RAM ( Plunker )

Con ngRepeat e il modulo di @OverZealous: 7s per 2000 righe e 240mo di RAM ( Plunker )

Con ngRepeat e la direttiva di @Connor: 8s per 2000 righe e 500mo di RAM ( Plunker )

Ho fatto i miei test con Google Chrome 32.

In alternativa, c'è il angular-oncepacchetto:

Se usi AngularJS, hai problemi di prestazioni e hai bisogno di visualizzare molti dati di sola lettura, questo progetto è per te!

angular-onceè stato effettivamente ispirato bindoncee fornisce once-*attributi simili :

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