What is the difference between:
{{::office.name}}
and
{{office.name}}
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.
:: is used for one-time binding. The expression will stop recalculating once they are stable, i.e. after the first digest.
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.
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() ".
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!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With