var htmlAnchorDirective = valueFn({ restrict: 'E', compile: function(element, attr) { if (msie <= 8) { if (!attr.href && !attr.name) { attr.$set('href', ''); } element.append(document.createComment('IE fix')); } return function(scope, element) { element.on('click', function(event){ if (!element.attr('href')) { event.preventDefault(); } }); }; } });
这个指令是为了<a ng-click="dosth()">,这样写就ok,在各个浏览器中都没问题。
1.ie8以下,如果<a>没有href属性,或者href属性为空,就会失去默认的链接样式。
2.各浏览器下,会有<a>点击的默认事件
看下源码:
if (!attr.href && !attr.name) { attr.$set('href', ''); }
如果是ie8,如果!attr.name,即不为锚点(<a>如果定义了name属性,可为锚点,如果没加这个判断,锚点也会加上href=“”),并且没有href属性或者href属性为空,设置其href = '';
element.append(document.createComment('IE fix'));
不知道为啥,求大牛解释下
return function(scope, element) { element.on('click', function(event){ if (!element.attr('href')) { event.preventDefault(); } }); };
阻止点击的默认事件
这样我们就可以很happy的这样写了<a ng-click="dosth()">
源码链接: