AngularJS Bind Once


Example

Angular has reputation for having awesome bidirectional data binding. By default, Angular continuously synchronizes values bound between model and view components any time data changes in either the model or view component.

This comes with a cost of being a bit slow if used too much. This will have a larger performance hit:

Bad performance: {{my.data}}

Add two colons :: before the variable name to use one-time binding. In this case, the value only gets updated once my.data is defined. You are explicitly pointing not to watch for data changes. Angular won't perform any value checks, resulting with fewer expressions being evaluated on each digest cycle.

Good performance examples using one-time binding

{{::my.data}}
<span ng-bind="::my.data"></span>
<span ng-if="::my.data"></span>
<span ng-repeat="item in ::my.data">{{item}}</span>
<span ng-class="::{ 'my-class': my.data }"></div>

Note: This however removes the bi-directional data binding for my.data, so whenever this field changes in your application, the same won't be reflected in the view automatically. So use it only for values that won't change throughout the lifespan of your application.