假设我有一个锚标记,比如
<a href="#" ng-click="do()">Click</a>
如何防止浏览器在AngularJS中导航到# ?
假设我有一个锚标记,比如
<a href="#" ng-click="do()">Click</a>
如何防止浏览器在AngularJS中导航到# ?
当前回答
避免href上的事件最安全的方法是将其定义为
<a href="javascript:void(0)" ....>
其他回答
你可以将$event对象传递给你的方法,并在它上面调用$event. preventdefault(),这样默认的处理就不会发生:
<a href="#" ng-click="do($event)">Click</a>
// then in your controller.do($event) method
$event.preventDefault()
我需要存在href属性的值退化(当js被关闭),所以我不能使用空href属性(或“#”),但上面的代码没有为我工作,因为我需要一个事件(e)变量。我创建了自己的指令:
angular.module('MyApp').directive('clickPrevent', function() {
return function(scope, element, attrs) {
return element.on('click', function(e) {
return e.preventDefault();
});
};
});
在HTML中:
<a data-click-prevent="true" href="/users/sign_up" ng-click="openSignUpModal()">Sign up</a>
你应该做的是,完全省略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;
}
因此,你甚至可以通过用一种微妙的、不同的样式来标记真正的链接,从而使你的网站更容易访问。
编码快乐!
您可以执行以下操作
1.从锚(a)标签中删除href属性
2.将css中的指针指针设置为ng click元素
[ng-click],
[data-ng-click],
[x-ng-click] {
cursor: pointer;
}
试试这个选项,我可以看到上面还没有列出:
<a href="" ng-click="do()">Click</a>