120

如果同时定义了 href 和 ng-click 属性：

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

该href属性优先于 ng-click。

我正在寻找一种方法来提高 ng-click 的优先级。

hrefTwitter Bootstrap 需要，我无法删除它。

4

17 回答 17

246

这个来自 Angular 文档站点的示例href甚至没有将其分配给空字符串：

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

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

于 2013-08-26T18:06:02.443 回答
89

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

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

根据角度文档，

像 ngClick 和 ngFocus 这样的指令在该表达式的范围内公开了一个 $event 对象。

于 2014-09-18T22:35:00.177 回答
72

这是另一个解决方案：

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

即只需从 href 属性中删除 #

于 2013-04-03T18:07:44.970 回答
35

如果您不需要 uri，您可能应该只使用按钮标签。

于 2013-02-18T15:18:22.280 回答
28

只是多了一个提示。如果您需要真实的 URL（以支持浏览器可访问性），您可以执行以下操作：

模板：

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

指示：

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

这样，您在 linkClicked() 中的代码将有机会在导航到链接之前执行

于 2014-11-18T23:22:04.720 回答
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();
      }
    });

这是一个演示缺失场景的plnkr 。href

于 2014-10-16T15:07:31.027 回答
13

这在 IE 9 和 AngularJS v1.0.7 中对我有用：

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

感谢鸭蛋对工作解决方案的评论！

于 2014-09-24T20:25:24.013 回答
12

这个问题有很多答案，但似乎对这里实际发生的事情有些困惑。

首先，你的前提

“href 覆盖 Angular.js 中的 ng-click”

是错的。实际发生的是，单击后，单击事件首先由 angular 处理（由ng-clickangular 1.x 和clickangular 2.x+ 中的指令定义），然后继续传播（最终触发浏览器导航到使用href属性定义的 url ）。（有关javascript 中事件传播的更多信息，请参阅此内容）

如果你想避免这种情况，那么你应该使用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。）

关于浏览器中访问链接颜色的评论。同样，这与角度无关，如果href="..."默认情况下您指向浏览器访问的 url，则链接颜色会有所不同。这由CSS :visited Selector控制，您可以修改您的 CSS 以覆盖此行为：

a {
   color:pink;
}

PS1：

一些答案建议使用：

<a href .../>

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

<a href="" .../>

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

于 2017-12-19T17:01:47.413 回答
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>

于 2017-03-08T09:20:48.993 回答
2

我认为您不需要从 href 中删除“#”。以下适用于 Angularjs 1.2.10

<a href="#/" ng-click="logout()">Logout</a>
于 2014-02-11T19:22:45.623 回答
1

你也可以试试这个：

<div ng-init="myVar = 'www.thesoftdesign'">
        <h1>Tutorials</h1>
        <p>Go to <a ng-href="{{myVar}}">{{myVar}}</a> to learn!</p>
</div>
于 2018-04-27T10:26:52.387 回答
0

我将为您添加一个对我有用的示例，您可以根据需要更改它。

我在我的控制器中添加了波纹管代码。

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

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

<a  href="" ng-model="showNumber" ng-click="showNumberFct()" ng-init="showNumber = false" >Click Me!!!</a>
于 2015-05-17T14:22:29.740 回答
0

您是否尝试在注销功能本身内部进行重定向？例如说你的注销功能如下

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

然后你可以有

<a ng-click="logout()">Sign out</a>
于 2016-07-14T10:13:49.937 回答
0

请检查这个

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

 $scope.logout = function(event)


 {
event.preventDefault();
alert("working..");
}
于 2016-09-27T15:16:49.913 回答
0 
//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>
于 2017-01-31T10:26:22.160 回答
0

这对我有用

<a href (click)="logout()">
   <i class="icon-power-off"></i>
   Logout
</a>
于 2019-06-07T05:14:10.587 回答
0 
 <a href="#">
       <span ng-click="logout()"> Sign out </span>
 </a>

我确实喜欢这个，它对我有用。

于 2021-06-10T06:54:11.333 回答