Angular JS - Rendre la valeur sans liaison de données

Question

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

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

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

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

Comment rendre value sans aucune la liaison de données ?

Answer 1

Angular 1.3 et plus

Dans la version 1.3, Angular a pris en charge cette fonctionnalité en utilisant la syntaxe suivante.

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

Comme mentionné dans cette réponse .

---

Angular 1.2 et inférieur

C'est très simple et ne nécessite pas de plugin. Regardez ça.

Cette minuscule directive accomplira 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 ceci

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

Vous pouvez lier comme d'habitude

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

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

Certains d'entre vous utilisent peut-être angular batarang, et comme mentionné dans les commentaires, si vous utilisez cette directive, l'élément s'affiche comme binding 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, alors 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 souffrez de TOC et que vous voulez supprimer les vides class l'attribut fait ceci

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

Answer 2

Il semble qu'Angular 1.3 (à partir de la bêta 10) intègre la liaison unique :

https://docs.angularjs.org/guide/expression#-event-

Reliure unique

Une expression qui commence par : : est considérée comme une expression à usage unique. Les expressions à usage unique cesseront de recalculer une fois qu'elles seront stables, ce qui arrive après le premier digest si le résultat de l'expression est une valeur non-définie (voir l'algorithme de stabilisation des valeurs ci-dessous).

Answer 3

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

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

Cette bibliothèque vous permet de rendre des éléments qui ne sont liés qu'une seule fois, lors de leur première initialisation. Toutes les autres mises à jour de ces valeurs seront ignorées. C'est un excellent moyen de réduire le nombre de montres sur la page pour des é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 value sera activé dès qu'il sera disponible, mais la montre sera alors désactivée.

Answer 4

Comparaison entre les réponses de @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.

Answer 5

Comme alternative, il y a angular-once paquet :

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

angular-once a été en fait inspiré par bindonce et fournit des services similaires once-* attributs :

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