TIL that instead of interpolating a data binding in a template (via double curly brace syntax), you can accomplish the same thing by adding the
ng-bind directive to a template tag.
The behaviors between ng-bind and interpolation are very similar, with two main differences:
1) If using interpolation, and the template renders before the necessary data has been loaded / bound to scope, the viewer will briefly see the double curly braces rendered in the browser until the required data is bound. Since ng-bind is an element attribute, it does not suffer from this issue.
- Note: A way to around the interpolation concern is to use ng-cloak to hide portions of a template until it and its data bindings have finished loading, but the ng-bind solution is less verbose.
2) Interpolation is slower than using ng-bind! The ng-bind directive places a watcher on the property to which it is bound: this watcher will only fire when that property changes. Interpolated bindings, however, are dirty-checked and refreshed on every digest cycle regardless of if they changed or not. This can lead to unnecessary updates and can slow your app down.
The performance benefit of using ng-bind is reason enough to favor it over interpolation. I’ll definitely be using it more for my data-binding needs.