Html href 覆盖 Angular.js 中的 ng-click
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14939385/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
href overrides ng-click in Angular.js
提问by Paul
When both, href and ng-click attributes are defined:
当同时定义 href 和 ng-click 属性时：
<a href="#" ng-click="logout()">Sign out</a>
the hrefattribute takes precedence over ng-click.
该href属性优先于 ng-click。
I am looking for a way to raise priority of ng-click.
我正在寻找一种提高 ng-click 优先级的方法。
hrefis required for Twitter Bootstrap, I can't remove it.
href是 Twitter Bootstrap 所必需的，我无法删除它。
采纳答案by Geoff
You should probably just use a button tag if you don't need a uri.
如果您不需要 uri，您可能应该只使用按钮标签。
回答by Homan
This example from the angular documentation site just does hrefwithout even assigning it to an empty string:
这个来自angular文档站点的例子href甚至没有将它分配给一个空字符串：
[<a href ng-click="colors.splice($index, 1)">X</a>]
回答by atroberts20
You can simply prevent the default behavior of the click event directly in your template.
您可以简单地直接在模板中阻止单击事件的默认行为。
<a href="#" ng-click="$event.preventDefault();logout()" />
Per the angular documentation,
根据角度文档，
Directives like ngClick and ngFocus expose a $event object within the scope of that expression.
像 ngClick 和 ngFocus 这样的指令在该表达式的范围内公开一个 $event 对象。
回答by Muhammad Towfique Imam
Here is another solution :
这是另一个解决方案：
<a href="" ng-click="logout()">Sign out</a>
i.e. Just remove the # from the href attribute
即只需从 href 属性中删除 #
回答by mPrinC
Just one more hint. If you need real URL (to support browser accessibility) you can do the following:
还有一点提示。如果您需要真实的 URL（以支持浏览器可访问性），您可以执行以下操作：
template:
模板：
<a ng-href="{{link}}" ng-click="$event.preventDefault(); linkClicked(link)">{{link}}</a>
directive:
指示：
$scope.linkClicked = function(link){
// your code here
$location.path(link);
};
In this way your code in linkClicked() will have chance to execute before navigating to the link
这样，您在 linkClicked() 中的代码将有机会在导航到链接之前执行
回答by pdoherty926
In Angular, <a>s are directives. As such, if you have an empty hrefor no href, Angular will call event.preventDefault.
在 Angular 中，<a>s 是指令。因此，如果您有一个空的href或没有href，Angular 将调用event.preventDefault.
From the source:
从来源：
element.on('click', function(event){
// if we have no href url, then don't navigate anywhere.
if (!element.attr(href)) {
event.preventDefault();
}
});
Here's a plnkrdemonstrating the missing hrefscenario.
这是一个plnkr演示缺少的href场景。
回答by Harmon
This worked for me in IE 9 and AngularJS v1.0.7:
这在 IE 9 和 AngularJS v1.0.7 中对我有用：
<a href="javascript:void(0)" ng-click="logout()">Logout</a>
Thanks to duckeggs' commentfor the working solution!
回答by Caner
There are so many answers for this question here but it seems there is a bit of confusion about what's actually going on here.
这里有很多关于这个问题的答案，但似乎对这里实际发生的事情有些困惑。
Firstly, your premise
首先，你的前提
"href overrides ng-click in Angular.js"
“href 覆盖 Angular.js 中的 ng-click”
is wrong. What is actually happening is that after your click, the click event is first handled by angular(defined by ng-clickdirective in angular 1.x and clickin angular 2.x+) and then it continues to propagate(which eventually triggers the browser to navigate to the url defined with hrefattribute).(See thisfor more about event propagation in javascript)
是错的。实际发生的是，在您点击之后，点击事件首先由 angular 处理（由ng-clickangular 1.x 和clickangular 2.x+ 中的指令定义），然后它继续传播（最终触发浏览器导航到使用href属性定义的 url 。（有关javascript 中事件传播的更多信息，请参阅此内容）
If you want to avoid this, then you should cancel the event propagation using the The Event interface's preventDefault()method:
如果你想避免这种情况，那么你应该使用Event 接口的preventDefault()方法取消事件传播：
<a href="#" ng-click="$event.preventDefault();logout()" />
(This is pure javascript functionality and nothing to do with angular)
（这是纯 javascript 功能，与 angular 无关）
Now, this will already solve your problem but this is not the optimal solution. Angular, rightfully, promotes the MVC pattern. With this solution, your html template is mixed with the javascript logic. You should try to avoid this as much as possible and put your logic into your angular controller. So a better way would be
现在，这已经可以解决您的问题，但这不是最佳解决方案。Angular 理所当然地推广了MVC 模式。使用此解决方案，您的 html 模板与 javascript 逻辑混合。您应该尽量避免这种情况，并将您的逻辑放入角度控制器中。所以更好的方法是
<a href="#" ng-click="logout($event)" />
And in your logout() method:
在您的 logout() 方法中：
logout($event) {
$event.preventDefault();
...
}
Now the click event will not reach the browser, so it will not try to load the link pointed by href. (However note that if the user right clicks on the link and directly opens the link, then there won't be a click event at all. Instead it will directly load the url pointed by the hrefattribute.)
现在 click 事件不会到达浏览器，因此它不会尝试加载 指向的链接href。（不过要注意，如果用户右键点击链接，直接打开链接，那么根本不会有点击事件，而是直接加载href属性指向的url 。）
Regarding the comments about visited link color in the browsers. Again this has nothing to do with angular, if your href="..."points to a visited url by your browser by default the link color will be different. This is controlled by CSS :visited Selector, you can modify your css to override this behaviour:
关于浏览器中访问链接颜色的评论。同样，这与 angular 无关，如果您href="..."的浏览器默认指向访问过的 url，则链接颜色将不同。这是由CSS :visited Selector控制的，您可以修改您的 css 以覆盖此行为：
a {
color:pink;
}
PS1:
PS1：
Some answers suggest to use:
一些答案建议使用：
<a href .../>
hrefis an angular directive. When your template is processed by angular this will be converted to
href是一个角度指令。当您的模板由 angular 处理时，这将转换为
<a href="" .../>
Those two ways are essentially the same.
这两种方式本质上是一样的。
回答by Anna
Just write ng-click before href ..It worked for me
只需在 href 之前写 ng-click ..它对我有用
<!DOCTYPE html>
<html>
<head>
<script data-require="[email protected]" data-semver="1.5.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script>
angular.module("module",[])
.controller("controller",function($scope){
$scope.func =function(){
console.log("d");
}
})</script>
</head>
<body ng-app="module" ng-controller="controller">
<h1>Hello ..</h1>
<a ng-click="func()" href="someplace.html">Take me there</a>
</body>
</html>回答by Saurabh
I don't think you need to remove "#" from href. Following works with Angularjs 1.2.10
我认为您不需要从 href 中删除“#”。以下适用于 Angularjs 1.2.10
<a href="#/" ng-click="logout()">Logout</a>
