What is ng-binding for in AngularJS?

Question

I am an AngularJS newbie and trying to figure out what class=ng-binding does in this example:

<label ng-dblclick="editTodo(todo)" class="ng-binding">fghfgh</label>

I found it here:

http://todomvc.com/architecture-examples/angularjs/#/

I use Chrome and developer tools. Is this an angular keyword? I could not find it in the manual (http://docs.angularjs.org/api/ng.directive:ngBind)

Answer 1

class="ng-binding" is used internally by Angular. For example, looking at the ngBind source we find this line that adds the class and associates the binding with it using .data:

 element.addClass('ng-binding').data('$binding', attr.ngBind);

That's why this line of Angular source (noting the double curlys on {{todo.title}} result in an ngBind):

<label ng-dblclick="editTodo(todo)">{{todo.title}}</label>

Is translated into what you see in the debugger:

<label ng-dblclick="editTodo(todo)" class="ng-binding">fghfgh</label>

So class="ng-binding" isn't something you should use. You'll find Angular frequently uses classes, comments and other markers- so you'll often see this kind of change between the original html and the Angular processed results.

Answer 2

From the docs:

ng-binding

Usage: angular applies this class to any element that is attached to a data binding, via ng-bind or {{}} curly braces, for example. (see databinding guide)

So the class ng-binding is applied by angular dynamically, for the compiler to understand that, element has a data binding associated with it.

As a developer we don't have to worry about that unless we apply some styles to these classes.