How does Angular.js handle event bindings like "ng-click"?

Question

How does Angular.js handle event bindings like "ng-click"?

If I check the HTML output in the DOM using the Chrome Dev tools, I see only 2 classes added to elements that have the directives "ng-click", "ng-scope" and "ng-binding". How does Angular bind to the DOM to intercept them? Does it go to the topmost element and store a large object in events matching memory with the DOM elements to which they are registered, and uses event bubbles? or something else?

Answer 1

AngularJS does a dirty check, every time AngularJS finds a directive, it will set $ watch to look at the changes.

The $ watch list is a collection of expressions that may change from the last iteration. If a change is detected, the $ watch function is called, which usually updates the DOM with the new value. After the Angular $ digest loop completes, execution leaves the context of Angular and JavaScript. This is followed by a re-display of the DOM browser to reflect any changes.

To say that it is simple, there is a mechanism that creates a list of directives requiring binding, during the $ digest cycle the list will be checked for changes if there is a change that the browser re-displays the DOM, and it will be reflected in the browser.

This is a very short explanation, you can find here:

http://docs.angularjs.org/guide/concepts#runtime

Answer 2

Ng- [eventname] operations work by executing element.bind , where element is a jQuery / jqLite element . This binding method works by calling element.addEventListener (at least in Chrome). You will not see this eventlistener by checking the DOM.