首先貼出ng-click實(shí)現(xiàn)的源碼,我做了一些注釋
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'轉(zhuǎn)化成'ngClick'
//得到全局變量ngEventDirectives,用于生成directive
ngEventDirectives[directiveName] = ['$parse', '$rootScope', function($parse, $rootScope) {
//知道directive就知道這是干嘛的，不知道的可以先搜一下directive
return {
restrict: 'A',
compile: function($element, attr) {
// 根據(jù)ng-click中的表達(dá)式轉(zhuǎn)換成一個function fn,關(guān)于$parse服務(wù)的詳細(xì)說明下面會提一下
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事件則異步調(diào)用【個人認(rèn)為是為了響應(yīng)流暢，有其它見解請不吝賜教】
if (forceAsyncEvents[eventName] && $rootScope.$$phase) {
scope.$evalAsync(callback);
} else {
scope.$apply(callback);
}
});
};
}
};
}];
}
);
只要聽說過angular的service,directive理解起來沒什么問題
根據(jù)它很容易寫出監(jiān)聽其它事件的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服務(wù)
例子
- $parse
- 作用：將一個AngularJS表達(dá)式轉(zhuǎn)換成一個函數(shù)
- Usage
- $parse(expression)
- arguments
- expression:string,需要被編譯的AngularJS語句,'::'開頭表示當(dāng)表達(dá)式的值為undefine時忽略攔截函數(shù)，直接返回undefined
- interceptorFn:function,攔截函數(shù)，形式interceptorFn(value, scope, locals)，value是表達(dá)式的值
- expensiveCheck:bool,使用cacheExpensive并且做更多的檢查，
check if obj is Function that is fast and works across iframes and other contexts?
- return
- returnsfunc(context, locals)
- context[object]:針對你要解析的語句，這個對象中含有你要解析的語句中的表達(dá)式(通常是一個scope object)
- locals[object]: 關(guān)于context中變量的本地變量，對于覆蓋context中的變量值很有用。
- 返回的函數(shù)還有下面三個特性：
- literal[boolean]:表達(dá)式的頂節(jié)點(diǎn)是否是一個javascript字面量
- constant[boolean]:表達(dá)式是否全部是由javascript的常量字面量組成
- assign[func(context, local)]:可以用來在給定的上下文中修改表達(dá)式的值
