Valeur de rendu sans liaison de données

Angular 1.3+

En 1.3, Angular a pris en charge cette utilisation en utilisant la syntaxe suivante.

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

Comme mentionné dans cette réponse .

Angulaire 1.2 et ci-dessous

C'est simple et n'a pas besoin d'un plugin. Regarde ça.

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

 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> 

Vous pouvez lier comme normal

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

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

Certains d'entre vous peuvent utiliser le batarang angulaire et, comme mentionné dans les commentaires, si vous utilisez cette directive, l'élément apparaît toujours comme contraignant quand ce n'est pas le cas. Je suis certain que cela a quelque chose à voir avec les classes qui sont attachées à l'élément. Essayez ceci, il devrait fonctionner (pas 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 TOC et que vous souhaitez supprimer l'attribut de class vide class faites ceci

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

Il semble que Angular 1.3 (commençant avec la version beta 10) ait une liaison unique intégrée:

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

Reliure ponctuelle

Une expression qui commence par :: est considérée comme une expression ponctuelle. Les expressions ponctuelles arrêteront le recalcul une fois qu'elles sont stables, ce qui se produit après le premier résumé si le résultat de l'expression est une valeur non définie (voir l'algorithme de stabilisation de la 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 rendre les éléments liés uniquement une fois – lorsqu'ils sont initialisés. 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 des choses qui ne changeront pas une fois qu'elles auront été rendues.

Exemple d'utilisation:

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

Lorsqu'il est utilisé comme ceci, la propriété sous value sera définie une fois qu'elle est disponible, mais la montre sera désactivée.

La comparaison entre @OverZealous et @Connor répond:

Avec le ng traditionnel Répétition angulaire: 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 variante, il existe angular-once paquet angular-once :

Si vous utilisez AngularJS, avez des problèmes de performance et devez afficher beaucoup de données en lecture, ce projet est pour vous!

bindonce angular-once était vraiment inspiré par bindonce et fournit des attributs once-* 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>