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)
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.
From the docs:
ng-bindingUsage: 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.
ng-binding is debugging noise. It is not used for anything. Most likely it was added for browser vendor tooling. Unfortunately the default distribution of Angular 1.x came packaged with
debug defaults set to true. This resulted in average AngularJS app doing more DOM manipulations than necessary and all demos showing this as best practice.
AngularTS fixes this problem.
