93

AngularJS has a new feature since the version 1.3.0-beta.10: the "lazy one-time binding".

Simple expressions can be prefixed with ::, telling angular to stop watching after the expression was first evaluated. The common example given is something like:

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

Is there a similar syntax for expressions like the following ones?

<div ng-if="user.isSomething && user.isSomethingElse"></div>
<div ng-class="{classNameFoo: user.isSomething}"></div>
Blackhole
  • 20,129
  • 7
  • 70
  • 68
seldary
  • 6,186
  • 4
  • 40
  • 55

1 Answers1

161

Yes. You can prefix every expressions with ::, even the ones in ngIf or ngClass:

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

Actually, the code simply checks that the two first characters in the expression are : in order to activate the one-time binding (and then removes them, thus the parenthesis aren't even needed). Everything else remains the same.

Blackhole
  • 20,129
  • 7
  • 70
  • 68
  • 3
    It answers my question, although some of the new features don't work well: `
    ` and `
    ` both render. It works without the "::".     – seldary May 31 '14 at 12:32
  • @seldary I can't reproduce the problem. Every expressions prefixed with `::` work well for me, as explained in my edit. Can you make a fiddle, if in doubt? – Blackhole May 31 '14 at 12:40
  • 7
    At first it appeared not to work for me too, with ngClass that had multiple classes defined. I quickly found out that the binding was still bound because some of the watched variables used in ngClass were not yet defined (and we know that angular will wait for value to be defined first before releasing the watcher). Here's a small fiddle to demonstrate this behavior http://jsfiddle.net/2LkyLoop/. – Denis Pshenov Jan 04 '15 at 13:56
  • How can I do a one-time binding on a function? For example, {{::makeDonut( latestDate, key, true, "myId"+$index )}} throws an error, "Syntax Error: Token ':' not a primary expression at column 1 of the expression" ... ? – MaxRocket May 05 '15 at 20:19
  • No, using 1.2.26 is that a problem? – MaxRocket May 07 '15 at 21:21
  • 1
    @MaxRocket bindonce syntax was added in angular 1.3. So it wont work in 1.2 or lower – Berty Jun 08 '15 at 19:17
  • 2
    The one-time binding of ng-if does not seem to work. Watcher count is very high with or without the `::`. It works well for ng-class, but ng-if does not seem to obey one-time binding for me (1.5.6). Note that I'm trying to one-way bind an object property that came from an ng-repeat. Not sure if that makes a difference. – AgmLauncher Jun 21 '16 at 02:23
  • @AgmLauncher There's no reason for it to not work in your case. Please open a new question in order to give more details on your problem, I'll be happy to help! – Blackhole Jun 21 '16 at 11:27