CODEWITHSUNDEEP
angularjs
user603007
user603007

Reputation: 11794

What is ng-binding for in AngularJS?

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)

Upvotes: 30

Views: 48341

Answers (3)

Anatoly
Anatoly

Reputation: 456

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.

Upvotes: 0

Asim K T
Asim K T

Reputation: 18124

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.

Upvotes: 8

KayakDave
KayakDave

Reputation: 24676

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.

Upvotes: 42

Related Questions