JS - Why does angular use an `ng-click="f()"` attribute for handling click events, instead of `$(el).on('click', f)`?

Question

Why does angular use an ng-click="f()" attribute for handling click events, instead of $(el).on('click', f)?

I'm asking this because it's generally considered a bad practice to use the html onclick attribute, so why does Angular use this approach?

Answer 1

Your confusion comes from misunderstanding what's behind onclick and ng-click. Although they are both attributes, they are processed by different entities. The former is the way to add event listener to trigger callback when a click event occurs on DOM element. This attribute is processed by a browser and your callback, specified in this attribute, is executed by a browser. The latter is called angular directive in a form of an attribute, and a browser knows nothing about it. It's processed by the framework and some logic, like triggering event handler, is set up by the framework. If you don't use the framework, than ng-click is going to live there unattended, and you won't have your callback executed on click event.

Here is the relevant part of ngClick directive - the code executed by the framework when it processes ng-click attribute:

ngEventDirectives['ngClick'] = ['$parse', '$rootScope', function($parse, $rootScope) {
    return {
        restrict: 'A',
        compile: function($element, attr) {
            // fn "points" at the function you specified in the `ng-click`
            // and will be executed below when a click event occurs
            var fn = $parse(attr['ngClick'], null, true);
            return function ngEventHandler(scope, element) {
                element.on(eventName, function(event) {
                    var callback = function() {
                        // here `fn` is being executed
                        fn(scope, {$event:event});
                    };
                    if (forceAsyncEvents[eventName] && $rootScope.$$phase) {
                        scope.$evalAsync(callback);
                    } else {
                        scope.$apply(callback);
                    }
                });
            };
        }
    };
}];

You can see, that when angular processes ng-click attribute, it executes the function ngEventHandler, which binds the custom callback to the click event of the DOM:

element.on(eventName, function(event) {

Answer 2

When you set an "onclick" property of a DOM element, the value remains exactly what you assign. The browser does not perform the same "convert the string to a function" operation that it does when you create an "onclick" attribute in the HTML source.

The "ng-" properties are interpreted by Angular code, and it can do whatever it wants to set up the event handler, including treating the string as the body of a function.

If you want to set up an event handler via the DOM "onclick" property, you have to assign a function, not a string:

foo.onclick = myFunction;

or

foo.onclick = function() { myFunction(someArgument); };

Answer 3

The magic behind two way binding is digest cycle.

1. What is $apply? $apply takes you from javascript context to angular context. Internally uses $digest(triggers digest cycle).

So, Javascript - $apply - digest cycle - view.

Difference between $(element).on('click', callback) and ng-click.

1.$(element).on('click', callback)

$(element).on('click', function(){
  //do your stuff
  //It is in Javascript context
  //Not known to angular
})

2.ng-click implentation

element.on(eventName, function(event) { //Here, event name is 'click'
   var callback = function() {
     fn(scope, { $event: event });
   };       
   scope.$apply(callback); //Here, ng-click wraps your code in $apply  to take you from javascript context to angular context (Triggers digest cycle).
});

Answer 4

$("#my-button").on('click', myFunction)

is a code in JavaScript, using jQuery.

ng-click = "myFunction()"

is using AngularJS's ability to read through the attributes of the tags.

onclick = "myFunction();"

is the "old", HTML way to call a function.