Liaison unique paresseuse angulaire pour les expressions

93

AngularJS a une nouvelle fonctionnalité depuis la version 1.3.0-beta.10: la "liaison unique paresseuse" .

Les expressions simples peuvent être préfixées par ::, indiquant à angular d'arrêter de regarder après que l'expression a été évaluée pour la première fois. L'exemple commun donné est quelque chose comme:

<div>{{::user.name}}</div>

Existe-t-il une syntaxe similaire pour les expressions comme les suivantes?

<div ng-if="user.isSomething && user.isSomethingElse"></div>
<div ng-class="{classNameFoo: user.isSomething}"></div>
javascript angularjs binding lazy-evaluation seldary
la source
Reportez-vous à la documentation angulaire pour une explication détaillée: docs.angularjs.org/guide/expression#one-time-binding
Akshay Gundewar

Réponses:

160

Oui. Vous pouvez préfixer toutes les expressions avec ::, même celles de ngIfou ngClass:

<div ng-if="::(user.isSomething && user.isSomethingElse)"></div>
<div ng-class="::{classNameFoo: user.isSomething}"></div>

En fait, le code vérifie simplement que les deux premiers caractères de l'expression sont :destinés à activer la liaison unique (puis les supprime, donc les parenthèses ne sont même pas nécessaires). Tout le reste reste le même.

Trou noir
la source
3
Cela répond à ma question, bien que certaines des nouvelles fonctionnalités ne fonctionnent pas bien: <div ng-if="::user.isSomething"></div>et les <div ng-if="::(!user.isSomething)"></div>deux sont rendus. Cela fonctionne sans le "::".
seldary
@seldary Je ne peux pas reproduire le problème. Toutes les expressions préfixées par ::fonctionnent bien pour moi, comme expliqué dans ma modification. Pouvez-vous faire un violon, en cas de doute?
Blackhole
7
Au début, cela ne fonctionnait pas non plus pour moi, avec ngClass qui avait plusieurs classes définies. J'ai rapidement découvert que la liaison était toujours liée car certaines des variables surveillées utilisées dans ngClass n'étaient pas encore définies (et nous savons que angular attendra que la valeur soit définie avant de libérer l'observateur). Voici un petit violon pour démontrer ce comportement jsfiddle.net/2LkyLoop .
Denis Pshenov
1
La syntaxe @MaxRocket bindonce a été ajoutée dans angular 1.3. Donc, cela ne fonctionnera pas dans la version 1.2 ou inférieure
Berty
2
La liaison unique de ng-if ne semble pas fonctionner. Le nombre d'observateurs est très élevé avec ou sans ::. Cela fonctionne bien pour ng-class, mais ng-if ne semble pas obéir à une liaison ponctuelle pour moi (1.5.6). Notez que j'essaie de lier à sens unique une propriété d'objet provenant d'un ng-repeat. Je ne sais pas si cela fait une différence.
AgmLauncher