Href 重写 Angular.js 中的 ng-click

小开

最佳答案

如果你不需要上厕所的话，你应该用个按钮标签。

小开

还有一个解决办法:

<a href="" ng-click="logout()">Sign out</a>

例如，只需删除 href 属性中的 #

小开

角度文档站点的这个例子只是执行 href，甚至没有将它分配给一个空字符串:

[<a href ng-click="colors.splice($index, 1)">X</a>]

Http://docs.angularjs.org/api/ng.directive:select

小开

我不认为您需要删除 href 中的“ #”

<a href="#/" ng-click="logout()">Logout</a>

小开

您可以直接在模板中防止单击事件的默认行为。

<a href="#" ng-click="$event.preventDefault();logout()" />

根据角度文件角度文件,

NgClick 和 ngFocus 等指令在该表达式的作用域内公开 $event 对象。

小开

这在 IE9和 AngularJS v1.0中对我很有用。7:

<a href="javascript:void(0)" ng-click="logout()">Logout</a>

Thanks to 鸭蛋的评论 for the working solution!

小开

在角度，<a>s are directives。因此，如果你有一个空的 href或没有 href，角度将调用 event.preventDefault。

来自来源:

    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 普林克 demonstrating the missing href scenario.

小开

还有一个提示。如果你需要真正的 URL (以支持浏览器的可访问性) ，你可以做到以下几点:

模板:

<a ng-href="\{\{link}}" ng-click="$event.preventDefault(); linkClicked(link)">\{\{link}}</a>

directive:

$scope.linkClicked = function(link){
// your code here
$location.path(link);
};

通过这种方式，在导航到链接之前，您在 linkClick ()中的代码将有机会执行

小开

我会为你添加一个例子，为我工作，你可以改变它，因为你想要的。

我将下面的代码添加到我的控制器中。

     $scope.showNumberFct = function(){
alert("Work!!!!");
}

对于我的视图页面，我添加了下面的代码。

<a  href="" ng-model="showNumber" ng-click="showNumberFct()" ng-init="showNumber = false" >Click Me!!!</a>

小开

您尝试过在注销函数内部重定向吗? 例如，假设您的注销函数如下所示

$scope.logout = function()
{
$scope.userSession = undefined;
window.location = "http://www.yoursite.com/#"
}

然后你就可以

<a ng-click="logout()">Sign out</a>

小开

请看看这个

<a href="#" ng-click="logout(event)">Logout</a>


$scope.logout = function(event)




{
event.preventDefault();
alert("working..");
}

小开

//for dynamic elements - if you want it in ng-repeat do below code


angular.forEach($scope.data, function(value, key) {
//add new value to object
value.new_url  = "your url";
});


<div ng-repeat="row in data"><a ng-href="\{\{ row.url_content }}"></a></div>

小开

只要在他们来之前写下来就行了. . 对我来说很管用

<!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>

小开

这个问题有很多答案，但似乎对于这里到底发生了什么有点困惑。

首先，你的前提

“ href 重写 Angular.js 中的 ng-click”

是错的。实际发生的情况是，在你点击之后，点击事件首先被角度处理(由角度1.x 的 ng-click指令和角度2的 click定义)。X +) ，然后继续传播(最终触发浏览器导航到用 href属性定义的 URL)。(有关 javascript 中的事件传播的更多信息，请参见这个)

如果您想避免这种情况，那么您应该使用 The Event interface's preventDefault() method来取消事件传播:

<a href="#" ng-click="$event.preventDefault();logout()" />

(这是纯粹的 javascript 功能，与 angle 无关)

现在，这已经解决了你的问题，但这不是最佳解决方案。角度，正确地，促进车祸模式。有了这个解决方案，您的 html 模板就与 javascript 逻辑混合在一起了。你应该尽量避免这种情况，把你的逻辑放到角度控制器中。所以更好的办法是

<a href="#" ng-click="logout($event)" />

在 logout ()方法中:

logout($event) {
$event.preventDefault();
...
}

现在点击事件不会到达浏览器，所以它不会尝试加载 href指向的链接。(但是请注意，如果用户右键单击链接并直接打开链接，那么根本不会出现单击事件。相反，它将直接加载由 href属性指向的 URL。)

关于浏览器中访问过的链接颜色的评论。同样，这与角度没有任何关系，如果你的 href="..."指向浏览器默认访问的网址，链接颜色将会不同。这是由 CSS: 访问的选择器控制的，你可以修改你的 css 来覆盖这个行为:

a {
color:pink;
}

PS1:

一些答案建议使用:

<a href .../>

href是一个角度指令。当您的模板被角度处理时，它将被转换为

<a href="" .../>

这两种方式本质上是一样的。

小开

你也可以试试这个:

<div ng-init="myVar = 'www.thesoftdesign'">
<h1>Tutorials</h1>
<p>Go to <a ng-href="\{\{myVar}}">\{\{myVar}}</a> to learn!</p>
</div>

小开

这对我有用

<a href (click)="logout()">
<i class="icon-power-off"></i>
Logout
</a>

小开

 <a href="#">
<span ng-click="logout()"> Sign out </span>
</a>

我喜欢这样，这对我很有效。