假设我有一个锚标记,比如
<a href="#" ng-click="do()">Click</a>
如何防止浏览器在AngularJS中导航到# ?
假设我有一个锚标记,比如
<a href="#" ng-click="do()">Click</a>
如何防止浏览器在AngularJS中导航到# ?
当前回答
我在使用锚进行角引导下拉时遇到了同样的问题。我发现唯一的解决方案,避免不必要的副作用(即。因为使用preventDefault())而没有关闭的下拉列表使用以下方法:
<a href="javascript:;" ng-click="do()">Click</a>
其他回答
你可以将$event对象传递给你的方法,并在它上面调用$event. preventdefault(),这样默认的处理就不会发生:
<a href="#" ng-click="do($event)">Click</a>
// then in your controller.do($event) method
$event.preventDefault()
你应该做的是,完全省略href属性。
如果你看一下a element指令(它是Angular核心的一部分)的源代码,它在第29 - 31行声明:
if (!element.attr(href)) {
event.preventDefault();
}
这意味着Angular已经解决了没有href的链接问题。你仍然有唯一的问题是css问题。你仍然可以将指针样式应用于具有ng-clicks的锚点,例如:
a[ng-click] {
/* Styles for anchors without href but WITH ng-click */
cursor: pointer;
}
因此,你甚至可以通过用一种微妙的、不同的样式来标记真正的链接,从而使你的网站更容易访问。
编码快乐!
借用tennisgent的答案。我喜欢你不需要创建一个自定义指令来添加所有的链接。然而,我不能让他在IE8中工作。下面是最终对我有用的方法(使用angular 1.0.6)。
注意,'bind'允许你使用angular提供的jqLite,所以不需要用完整的jQuery来包装。还需要stoppropagation方法。
.directive('a', [
function() {
return {
restrict: 'E',
link: function(scope, elem, attrs) {
elem.bind('click', function(e){
if (attrs.ngClick || attrs.href === '' || attrs.href == '#'){
e.preventDefault();
e.stopPropagation();
}
})
}
};
}
])
既然你在制作网页应用,为什么还需要链接呢?
把锚换成按钮!
<button ng-click="do()"></button>
我找到的最简单的解决方法是:
<a href="#" ng-click="do(); $event.preventDefault()">Click</a>