首先贴出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)]:可以用来在给定的上下文中修改表达式的值
