We can use Angular’s (1.3+) in-built one-time bindings to gain a performance boost on data which is set once and never changes. The way it works is by removing the watchers ($watch() bindings) on scope bound expressions so when the values are set once they revoke their binding. This reduces the number of watchers registered on the $digest cycle and consequently the number of re-renders on the DOM.
Angular Official Docs:Â https://docs.angularjs.org/guide/expression#one-time-binding
“One-time expressions will stop recalculating once they are stable, which happens after the first digest…”
This is how you do one-time bindings.
1 2 3 4 5 6 7 8 |
="::fn()" {{::var}} ng-if="::var" ng-if="::!var" ng-class="::{name:expr}" route-href="::fn()" |
DO:
1 2 3 |
ng-if="::(var.name && var.blah)" |
DO NOT:
Because it blows up.
1 2 3 |
ng-if="::var.name && ::var.blah" |
Additional thoughts around one-time bindings:
- Only use one-time binding on values which DO NOT change once the page has loaded.