Valeur de rendu sans liaison de données

Dans AngularJS, comment puis-je rendre une valeur sans liaison de données bidirectionnelle? On peut vouloir faire cela pour des raisons de performances, ou même pour rendre une valeur à un moment donné.

Les exemples suivants utilisent tous deux la liaison de données:

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

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

Comment effectuer un rendu value sans aucune liaison de données?

Angulaire 1.3+

Dans la version 1.3, Angular a pris en charge cela en utilisant la syntaxe suivante.

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

Comme mentionné dans cette réponse .

Angular 1.2 et moins

C'est simple et ne nécessite pas de plugin. Regarde ça.

Cette petite directive accomplira facilement ce que vous essayez d'accomplir

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

Vous pouvez lier une fois comme ça

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

Tu peux lier comme d'habitude

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

Démo: http://jsfiddle.net/fffnb/

Certains d'entre vous utilisent peut-être le batarang angulaire, et comme mentionné dans les commentaires, si vous utilisez cette directive, l'élément apparaît toujours comme contraignant alors qu'il ne l'est pas, je suis presque sûr que cela a quelque chose à voir avec les classes qui sont attachées à l'élément. essayez ceci, cela devrait fonctionner (non testé) . Faites-moi savoir dans les commentaires si cela a fonctionné pour vous.

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

@ x0b : Si vous avez un OCD et que vous souhaitez supprimer l' classattribut vide, procédez comme suit

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

Il semble qu'Angular 1.3 (à partir de la version bêta 10) ait une liaison unique intégrée:

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

Liaison unique

Une expression commençant par :: est considérée comme une expression unique. Les expressions à usage unique arrêteront de recalculer une fois qu'elles sont stables, ce qui se produit après le premier condensé si le résultat de l'expression est une valeur non indéfinie (voir l'algorithme de stabilisation de valeur ci-dessous).

Utilisez le module bindonce . Vous devrez inclure le fichier JS et l'ajouter en tant que dépendance à votre module d'application:

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

Cette bibliothèque vous permet de restituer des éléments qui ne sont liés qu'une seule fois - lors de leur première initialisation. Toute autre mise à jour de ces valeurs sera ignorée. C'est un excellent moyen de réduire le nombre de montres sur la page pour les éléments qui ne changeront pas après leur rendu.

Exemple d'utilisation:

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

Lorsqu'elle est utilisée de cette manière, la propriété sous valuesera définie une fois qu'elle sera disponible, mais la montre sera désactivée.

Comparaison entre les réponses @OverZealous et @Connor:

Avec le traditionnel ngRepeat d'angular: 15s pour 2000 lignes et 420mo de RAM ( Plunker )

Avec ngRepeat et le module de @OverZealous: 7s pour 2000 lignes et 240mo de RAM ( Plunker )

Avec ngRepeat et la directive de @Connor: 8s pour 2000 lignes et 500mo de RAM ( Plunker )

J'ai fait mes tests avec Google Chrome 32.

En alternative, il existe un angular-oncepackage:

Si vous utilisez AngularJS, avez des problèmes de performances et avez besoin d'afficher beaucoup de données en lecture seule, ce projet est pour vous!

angular-oncea été en fait inspiré bindonceet fournit des once-*attributs similaires :

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