Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What does two colons inside an angular expression {{::}} mean?

What is the difference between:

{{::office.name}} 

and

{{office.name}} 

in angularJS?

like image 701
J0B Avatar asked Jan 08 '16 13:01

J0B


People also ask

What does double colon mean in AngularJS?

With the new one-time binding syntax, we introduce a double-colon before our value: <h1>{{ ::title }}</h1> Angular processes the DOM as usual and once the value has been resolved it removes the particular property from its internal $$watchers list.

What does :: mean in AngularJS?

:: is used for one-time binding. The expression will stop recalculating once they are stable, i.e. after the first digest.

What are angular expressions?

AngularJS expressions can also be written inside a directive: ng-bind="expression" . AngularJS will resolve the expression, and return the result exactly where the expression is written. AngularJS expressions are much like JavaScript expressions: They can contain literals, operators, and variables.

What are expressions in angular 2?

Expressions represent how data should be projected to the View. Expressions should not have any side effect and should be idempotent. From the Template Syntax guide, Interpolation section: "The expression can invoke methods of the host component as we do here with getVal() ".


1 Answers

One-time binding From Angular Docs.

An expression that starts with :: is considered a one-time expression. One-time expressions will stop recalculating once they are stable, which happens after the first digest if the expression result is a non-undefined value (see value stabilization algorithm below).

In many situations, the values need to be only shown in the view and are never going to update from view or controller. However, if two-way binding is used, $digest will check for any changes in the expression in each cycle, which is not necessary. In these cases, :: should be used before expression. As stated in the above statement, this is more efficient than two-way binding syntax for such cases.


Blog: AngularJS one-time binding syntax from @Todd Motto

In a nut shell, when we declare a value such as {{ ::foo }} inside the DOM, once this value becomes defined, Angular will render it, unbind it from the watchers and thus reduce the volume of bindings inside the $digest loop. Simple!

like image 178
5 revs Avatar answered Oct 02 '22 00:10

5 revs