angular学习之一（ng-click源码）

首先贴出ng-click实现的源码,我做了一些注释

forEach(//依次生成ng-click/ng-dblclick...
  'click dblclick mousedown mouseup mouseover mouseout mousemove mouseenter mouseleave keydown keyup keypress submit focus blur copy cut paste'.split(' '),
  function(eventName) {//@eventName 'click'
    var directiveName = directiveNormalize('ng-' + eventName);//将'ng-click'转化成'ngClick'
    //得到全局变量ngEventDirectives,用于生成directive
    ngEventDirectives[directiveName] = ['$parse', '$rootScope', function($parse, $rootScope) {
      //知道directive就知道这是干嘛的，不知道的可以先搜一下directive
      return {
        restrict: 'A',
        compile: function($element, attr) {
          // 根据ng-click中的表达式转换成一个function fn,关于$parse服务的详细说明下面会提一下
          var fn = $parse(attr[directiveName], /* interceptorFn */ null, /* expensiveChecks */ true);
          return function ngEventHandler(scope, element) {
            //绑定click事件
            element.on(eventName, function(event) {
              var callback = function() {
                fn(scope, {$event:event});
              };
              //forceAsyncEvents={'blur':true,'focus':true}
              // 如果是blur,focus事件则异步调用【个人认为是为了响应流畅，有其它见解请不吝赐教】
              if (forceAsyncEvents[eventName] && $rootScope.$$phase) {
                scope.$evalAsync(callback);
              } else {
                scope.$apply(callback);
              }
            });
          };
        }
      };
    }];
  }
);

只要听说过angular的service,directive理解起来没什么问题
根据它很容易写出监听其它事件的directive

.directive('ngTap', ['$parse',function($parse) {
  return {
   restrict: 'A',
   compile: function($element, attr) {
    var fn = $parse(attr["ngTap"]);
    return function ngEventHandler(scope, element) {
     element.on('tap', function(event) {
      var callback = function() {
       fn(scope, {
        $event: event
       });
      };
      scope.$apply(callback);
     });
    };
   }
  };
 }])

这里主要提一下$parse服务
例子

• $parse

• 作用：将一个AngularJS表达式转换成一个函数

• Usage

• $parse(expression)

• arguments

• expression:string,需要被编译的AngularJS语句,'::'开头表示当表达式的值为undefine时忽略拦截函数，直接返回undefined
• interceptorFn:function,拦截函数，形式interceptorFn(value, scope, locals)，value是表达式的值
• expensiveCheck:bool,使用cacheExpensive并且做更多的检查，check if obj is Function that is fast and works across iframes and other contexts?

• return

• returnsfunc(context, locals)
  • context[object]:针对你要解析的语句，这个对象中含有你要解析的语句中的表达式(通常是一个scope object)
  • locals[object]: 关于context中变量的本地变量，对于覆盖context中的变量值很有用。
  • 返回的函数还有下面三个特性：
    • literal[boolean]:表达式的顶节点是否是一个javascript字面量
    • constant[boolean]:表达式是否全部是由javascript的常量字面量组成
    • assign[func(context, local)]:可以用来在给定的上下文中修改表达式的值