Question

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

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

href属性优先于ng-click。

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

href是Twitter Bootstrap所必需的，我无法将其删除。

Answer 1

角度文档站点中的此示例只执行href，甚至没有将其分配给空字符串：

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

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

Answer 2

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

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

根据angular documentation，

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

Answer 3

这是另一种解决方案：

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

即。只需从href属性

中删除＃即可

Answer 4

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

Answer 5

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

模板：

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

指令：

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

通过这种方式，linkClicked（）中的代码将有机会在导航到链接之前执行

Answer 6

在Angular，<a>s are directives。因此，如果您有空href或没有href，Angular会调用event.preventDefault。

来自source：

    element.on('click', function(event){
      // if we have no href url, then don't navigate anywhere.
      if (!element.attr(href)) {
        event.preventDefault();
      }
    });

这是一个plnkr，展示了丢失的href情景。

Answer 7

这在IE 9和AngularJS v1.0.7中适用于我：

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

感谢duckeggs' comment的工作解决方案！

Answer 8

这个问题有很多答案，但似乎对这里的实际情况有些混淆。

首先，你的前提

＆＃34; href覆盖Angular.js中的ng-click＆＃34;

错了。实际发生的是，点击后，click事件首先由angular（由角度1.x中的ng-click指令和角度2.x +中的click定义）然后继续传播（最终会触发浏览器导航到使用href属性定义的网址）。（有关javascript中事件传播的详情，请参阅this）

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

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

（这是纯粹的javascript功能，与angular无关）

现在，这已经解决了您的问题，但这不是最佳解决方案。正确地，Angular促进了MVC pattern。使用此解决方案，您的html模板与javascript逻辑混合在一起。您应该尽可能地避免这种情况，并将您的逻辑放入角度控制器中。所以更好的方法是

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

在你的logout（）方法中：

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

现在点击事件不会到达浏览器，因此它不会尝试加载href指向的链接。（但请注意，如果用户右键单击链接并直接打开链接，则根本不会成为点击事件。而是直接加载href属性指向的网址。）

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

a {
   color:pink;
}

PS1 ：

有些答案建议使用：

<a href .../>

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

<a href="" .../>

这两种方式基本相同。

Answer 9

只需在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>

Answer 10

我认为你不需要从href中删除“＃”。以下是与Angularjs 1.2.10一起使用的

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

Answer 11

你也可以试试这个：

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

Answer 12

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

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

Answer 13

这对我有用

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

Answer 14

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

Answer 15

请检查

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

 $scope.logout = function(event)


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

Answer 16

您是否尝试在注销功能内重定向？例如，假设您的注销功能如下

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

然后你可以

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

Answer 17

我将为您添加一个适合我的示例，您可以根据需要进行更改。

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

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

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

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

href覆盖Angular.js中的ng-click

17 个答案: