How the method passed into a angularjs event-directive works? -


i'm new in angularjs , i'm trying write directives works on events 'blur'. i'm confused back-end process of event-directive. how work? there numerous directives 'ngclick' or 'nghover' , pass method want execute on event directives. this:

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

and define 'dosomethingonclick()' method in our controller. want know how 'ngclick' directive executes method on event happen. if can explain code, great.

thanks in advance.

here's definition of ng-click pulled 1.1.5 source added comments throughout code explain each line far understand it.

/**  * @ngdoc directive  * @name ng.directive:ngclick  *  * @description  * ngclick allows specify custom behavior when  * element clicked.  *  * @element  * @param {expression} ngclick {@link guide/expression expression} evaluate upon  * click. (event object available `$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>  */ /*  * directive allows creation of custom onclick handlers defined angular  * expressions , compiled , executed within current scope.  *  * events handled via these handler configured not propagate further.  */     //make object var ngeventdirectives = {};  //for each string in list separated spaces foreach(   'click dblclick mousedown mouseup mouseover mouseout mousemove mouseenter mouseleave'.split(' '),    //create function creates directive , called each element in list above   function(name) {      //directivenormalize things strip -data prefix , deal camel casing conversion     var directivename = directivenormalize('ng-' + name);      //setting  property on ngeventdirectives equal new [] contains dependency injection values , function return directive definion object (or in case link function) $parse service being used     ngeventdirectives[directivename] = ['$parse', function($parse) {        //link function call each element       return function(scope, element, attr) {          //$parse value passed in quotes attribute ng-click="something()" fn = something()         //my guess parse magic... investigate         var fn = $parse(attr[directivename]);          //setup regular event listener using bind abstraction addeventlistener/attachevent         element.bind(lowercase(name), function(event) {            //running function           scope.$apply(function() {             fn(scope, {$event:event});           });         });       };     }];   } ); 

Comments