假设我有一个锚标记,比如
<a href="#" ng-click="do()">Click</a>
如何防止浏览器在AngularJS中导航到# ?
假设我有一个锚标记,比如
<a href="#" ng-click="do()">Click</a>
如何防止浏览器在AngularJS中导航到# ?
当前回答
根据ngHref的文档,你应该可以去掉href或执行href=""。
<input ng-model="value" /><br />
<a id="link-1" href ng-click="value = 1">link 1</a> (link, don't reload)<br />
<a id="link-2" href="" ng-click="value = 2">link 2</a> (link, don't reload)<br />
<a id="link-4" href="" name="xx" ng-click="value = 4">anchor</a> (link, don't reload)<br />
<a id="link-5" name="xxx" ng-click="value = 5">anchor</a> (no link)<br />
其他回答
更新:我已经改变了我对这个解决方案的想法。经过更多的开发和时间的努力,我相信更好的解决这个问题的方法是:
<a ng-click="myFunction()">Click Here</a>
然后更新你的css有一个额外的规则:
a[ng-click]{
cursor: pointer;
}
它更简单,提供完全相同的功能,效率更高。希望这对将来寻找这个解决方案的人有所帮助。
以下是我之前的解决方案,我把它放在这里只是为了遗留的目的:
如果你经常遇到这个问题,一个简单的指令可以解决这个问题:
app.directive('a', function() {
return {
restrict: 'E',
link: function(scope, elem, attrs) {
if(attrs.ngClick || attrs.href === '' || attrs.href === '#'){
elem.on('click', function(e){
e.preventDefault();
});
}
}
};
});
它检查所有锚标记(<a></a>),看看它们的href属性是否为空字符串("")或散列('#'),或者存在ng-click赋值。如果发现其中任何一种情况,它将捕获事件并防止默认行为。
唯一的缺点是它为所有锚标记运行这个指令。因此,如果页面上有很多锚标记,而你只想阻止其中一小部分的默认行为,那么这个指令就不是很有效。然而,我几乎总是想要preventDefault,所以我在我的AngularJS应用程序中都使用这个指令。
你可以将$event对象传递给你的方法,并在它上面调用$event. preventdefault(),这样默认的处理就不会发生:
<a href="#" ng-click="do($event)">Click</a>
// then in your controller.do($event) method
$event.preventDefault()
在我的例子中,Angular: 10 -工作
<a [routerLink]="" (click)="myFunc()"> Click me </a>
更新:此方法将重新加载解析器。由于@Meeker
既然你在制作网页应用,为什么还需要链接呢?
把锚换成按钮!
<button ng-click="do()"></button>
另一种可能是:
<span ng-click="do()">Click</span>