Pau*_*aul 114 html anchor markup angularjs
当同时定义href和ng-click属性时:
<a href="#" ng-click="logout()">Sign out</a>
该href属性优先于ng-click.
我正在寻找一种提高ng-click优先级的方法.
href 是Twitter Bootstrap所必需的,我无法将其删除.
Hom*_*man 243
角度文档站点中的这个示例href甚至没有将其分配给空字符串:
[<a href ng-click="colors.splice($index, 1)">X</a>]
http://docs.angularjs.org/api/ng.directive:select
atr*_*s20 83
您可以直接在模板中阻止Click事件的默认行为.
<a href="#" ng-click="$event.preventDefault();logout()" />
根据角度文档,
像ngClick和ngFocus这样的指令在该表达式的范围内公开$ event对象.
Muh*_*mam 72
这是另一个解决方案:
<a href="" ng-click="logout()">Sign out</a>
即只需从href属性中删除#即可
mPr*_*inC 25
还有一点提示.如果您需要真实的URL(以支持浏览器可访问性),您可以执行以下操作:
模板:
<a ng-href="{{link}}" ng-click="$event.preventDefault(); linkClicked(link)">{{link}}</a>
指示:
$scope.linkClicked = function(link){
// your code here
$location.path(link);
};
这样,linkClicked()中的代码将有机会在导航到链接之前执行
pdo*_*926 21
在Angular中,<a>s是指令.因此,如果你有空href或没有href,Angular会调用event.preventDefault.
从来源:
element.on('click', function(event){
// if we have no href url, then don't navigate anywhere.
if (!element.attr(href)) {
event.preventDefault();
}
});
这是一个展示失踪情景的plnkrhref.
Har*_*mon 14
这在IE 9和AngularJS v1.0.7中对我有用:
<a href="javascript:void(0)" ng-click="logout()">Logout</a>
这里有很多这个问题的答案,但似乎对这里的实际情况有些疑惑.
首先,你的前提
"href覆盖Angular.js中的ng-click"
是错的.实际发生的是,点击后,click事件首先由angular处理(由ng-clickangular 1.x和clickangular 2.x +中的指令定义),然后继续传播(最终触发浏览器导航到URL具有定义的href属性).(参见本大约在javascript事件传播更多)
如果您想避免这种情况,那么您应该使用The Event接口的preventDefault()方法取消事件传播:
<a href="#" ng-click="$event.preventDefault();logout()" />
(这是纯粹的javascript功能,与angular无关)
现在,这已经解决了您的问题,但这不是最佳解决方案.正确地说,Angular促进了MVC模式.使用此解决方案,您的html模板与javascript逻辑混合在一起.您应该尽可能地避免这种情况,并将您的逻辑放入角度控制器中.所以更好的方法是
<a href="#" ng-click="logout($event)" />
在你的logout()方法中:
logout($event) {
$event.preventDefault();
...
}
现在点击事件不会到达浏览器,因此它不会尝试加载指向的链接href.(但请注意,如果用户右键单击链接并直接打开链接,则根本不会发生单击事件.而是直接加载href属性指向的URL .)
关于浏览器中访问过的链接颜色的评论.再次这与angular无关,如果您href="..."的浏览器默认指向访问的URL,则链接颜色将不同.这是由CSS控制的:访问过Selector,你可以修改你的css来覆盖这种行为:
a {
color:pink;
}
PS1:
一些答案建议使用:
<a href .../>
href是一个角度指令.当您的模板按角度处理时,将转换为
<a href="" .../>
这两种方式基本相同.
小智 5
只需在href之前编写ng-click ..它对我有用
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@1.5.0" 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>