假设我有一个锚标记,比如
<a href="#" ng-click="do()">Click</a>
如何防止浏览器在AngularJS中导航到# ?
假设我有一个锚标记,比如
<a href="#" ng-click="do()">Click</a>
如何防止浏览器在AngularJS中导航到# ?
当前回答
所以阅读这些答案,@Chris仍然有最“正确”的答案,我想,但它有一个问题,它没有显示“指针”....
所以这里有两种方法来解决这个问题,而不需要添加游标:指针样式:
使用javascript:void(0)代替#: <a href="javascript:void(0)" ng-click="doSomething()“>做< / > 在ng-click指令中使用$event.preventDefault()(这样你就不会用dom相关的引用来破坏你的控制器): <a href="#dontGoHere" ng-click="doSomething();$ event.preventDefault ()“>做< / >
就我个人而言,我更喜欢前者而不是后者。void(0)还有这里讨论的其他好处。在那个链接中也有关于“不显眼的JavaScript”的讨论,这是最近才出现的,并不一定直接适用于angular应用程序。
其他回答
尽管雷诺给出了一个很好的解决方案
<a href="#" ng-click="do(); $event.preventDefault()">Click</a>
我个人发现在某些情况下还需要$event.stopPropagation()来避免一些副作用
<a href="#" ng-click="do(); $event.preventDefault(); $event.stopPropagation();">
Click</a>
就是我的解
在我的例子中,Angular: 10 -工作
<a [routerLink]="" (click)="myFunc()"> Click me </a>
更新:此方法将重新加载解析器。由于@Meeker
避免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()
另一种可能是:
<span ng-click="do()">Click</span>