Use Ng-bind in AngularJS

AngularJS makes it easy to get your data from your JS controllers into the template. Just use double curly braces!! ({{ }} in case you were wondering). And why wouldn’t you? It makes your HTML very readable, and makes it obvious that you are referring to a JS object / variable when you encounter it. Plus you get data-binding thrown in for free! i.e, Anyone reading a code such as {{fruit}} can easily understand that “fruit” is a variable that is bounded to the DOM. But there is a lesser-known step brother to the double curlys that you should be using instead – the ng-bind.

Why, you ask? Well, consider our fruity example from before. 9 times out of 10, you would have no issues what so ever. But that 10th time (or every time, if you are using an old, slow, decrepit browser like IE7 or IE8), you would see something like the following flash by in your browser:

Flashing double curlys

This usually means that the template loaded before AngularJS had a chance to go in and compile the elements. To avoid this, one solution is to use ngCloak. However, ng-cloak only works for the initial load. And in some browsers, the above can flash even when you are just switching routes / views. What can you do in such a case?

Enter ng-bind

To overcome this, we can use ng-bind. ng-bind is used inside an HTML DOM element, like this:

<span ng-bind="fruit"></span>

Now, what is the difference between {{fruit}} and <span ng-bind=”fruit”></span>? Functionally, nothing. AngularJS in fact replaces all instances of {{fruit}} with <span ng-bind=”fruit”></span>. You can use the exact same expressions you put inside your double curlys and place it in an ng-bind. But in the time that it takes to replace it, you can sometimes be left with the flashing double curlys (which gets replaced real quick once AngularJS kicks in). But you can avoid even that time by directly using ng-bind within your elements. That tells AngularJS to put the contents of your ng-bind expression within the element. And thus, you could be left with something as beautiful as the list below always, consistently:

After using ng-bind

Abhiroop PatelUse Ng-bind in AngularJS
  • Carlos Serrano

    I´m sorry but I disagree with you on this matter.

    You are right when you say that angular does change {{exp}} with but you are wrong when you say that “ng-cloak only works for the initial load”.

    ‘ng-cloak’ works in compile time i.e. on the inital load of the page when the app is compiled but also when you include a template with ‘ng-iclude’, or ‘ng-view’ changes its content inside due to a route change.

    If ng-cloak is not working for you should try to put it more fine grained. Instead of putting the ng-cloak on the body tag, put it inside of the loaded template or in a wrapper div that contains the bindings that are giving you trouble.

    As you said {{}} make your templates much more readable and a code that is easy to read is easier to understand and by extension to maintain.

    I would only use ng-bind as the last resort.

  • Pingback: AngularJS - Beginners guide / Yoosuf Muhammad()

  • Pingback: AngularJS-Learning | Nisar Khan()