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

Issue

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.

Solution

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});
          });
        });
      };
    }];
  }
);

Answered By - shaunhusain