How does the method passed into an angularjs event-directive work?

Question

I'm new in angularjs and I'm trying to write some directives which will work on some events like 'blur'. But I'm really confused about the back-end process of an event-directive. How does it work? There are numerous directives like 'ngClick' or 'ngHover' and we pass the method which we want to execute on that event to this directives. Like this:

<div ng-click="doSomethingOnClick()"></div>

and we define 'doSomethingOnClick()' method in our controller. Now I just want to know how the 'ngClick' directive executes this method on the event happens. If you can explain with the code, that will be great.

Thanks in advance.

Answer 1

Here's the definition of ng-click pulled from the 1.1.5 source I also added comments throughout the code to explain each line so far as I understand it.

/**
 * @ngdoc directive
 * @name ng.directive:ngClick
 *
 * @description
 * The ngClick allows you to specify custom behavior when
 * element is clicked.
 *
 * @element ANY
 * @param {expression} ngClick {@link guide/expression Expression} to evaluate upon
 * click. (Event object is available as `$event`)
 *
 * @example
   <doc:example>
     <doc:source>
      <button ng-click="count = count + 1" ng-init="count=0">
        Increment
      </button>
      count: {{count}}
     </doc:source>
     <doc:scenario>
       it('should check ng-click', function() {
         expect(binding('count')).toBe('0');
         element('.doc-example-live :button').click();
         expect(binding('count')).toBe('1');
       });
     </doc:scenario>
   </doc:example>
 */
/*
 * A directive that allows creation of custom onclick handlers that are defined as angular
 * expressions and are compiled and executed within the current scope.
 *
 * Events that are handled via these handler are always configured not to propagate further.
 */




//make an object
var ngEventDirectives = {};

//for each string in the list separated by spaces
forEach(
  'click dblclick mousedown mouseup mouseover mouseout mousemove mouseenter mouseleave'.split(' '),

  //create a function which creates the directive and is called for each element in the list above
  function(name) {

    //directiveNormalize does things to strip the -data prefix and deal with camel casing conversion
    var directiveName = directiveNormalize('ng-' + name);

    //setting  a property on the ngEventDirectives equal to a new [] which contains the dependency injection values and finally the function that will return the directive definion object (or in this case the link function) $parse service is being used
    ngEventDirectives[directiveName] = ['$parse', function($parse) {

      //link function to call for each element
      return function(scope, element, attr) {

        //$parse the value passed in the quotes for this attribute ng-click="something()" then fn = something()
        //my guess is parse does some magic... will investigate this soon
        var fn = $parse(attr[directiveName]);

        //Setup the regular event listener using bind as an abstraction for addEventListener/attachEvent
        element.bind(lowercase(name), function(event) {

          //running the function
          scope.$apply(function() {
            fn(scope, {$event:event});
          });
        });
      };
    }];
  }
);