href覆盖Angular.js中的ng-click

118

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

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

该href属性优先于ng-click。

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

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

— 保罗
source

您能否详细说明“ Twitter Bootstrap需要href”？哪一部分？CSS或JavaScript？

— pkozlowski.opensource

Twitter Bootstrap导航“小部件”被设置为使用链接，如果您向其添加按钮，即使样式看起来像链接的按钮也会破坏导航的样式。它可能不是语义HTML，但@sketchfemme的解决方案完成了我（可能是Paul）想要的事情。

— BenCr 2013年

忽略我说的所有内容，如果您使用正确的HTML和类，那么navbar可以完美地与按钮配合使用。getbootstrap.com/components/#navbar

— BenCr 2013年

你应该接受Mithu的答案，这是用一个空URL

— 彼得·莫里斯

1

@Paul原始海报询问如何获取<a href>而不进行导航。接受的答案表示切换到按钮。尽管这行得通，但这并不是解决问题的方法，尤其是像我这样的人，由于它是引导菜单之类的东西，您不得不使用<a href>。解决此特定问题的正确方法是使用一个空的URL <a href="" ng-click="whatever()">退出</a>-我已经对其进行了测试并可以确认其正常工作。值得庆幸的是，其他人提供了正确的答案，否则我仍然会陷入困境。

— 彼得·莫里斯

35

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

— 杰夫
source

是的，如果您可以详细说明Twitter Bootstrap的要求，也许我可以提供更多帮助。

— Geoff

如何与搜索引擎一起使用？我正在使用AngularJS路由，并且需要维护服务中的状态，因此对于我所有的内部应用程序链接，我都使用$ location，但是删除href会使搜索引擎无法跟随该站点。

— Darrrrrren 2014年

2

按钮中不能包含其他元素，因此对于样式而言，您就不需要这样做-如果您需要在其中做一些事情。

— sheriffderek'3

246

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

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

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

— 荷曼
source

3

当我尝试执行此操作时，所有链接似乎都已被访问，这不是我要遵循的行为。另一种方法（href="#"）导致页面重新加载，这也是错误的。

— Rhys van der Waerden 2014年

4

这使IE9不会显示手形光标。使用href=""解决。

— Juampy NR 2015年

1

@juampy，可以使用CSS处理移交链接。给出的答案是AngularJS的官方方法。

— thenetimp

＃将被视为哈希链接。

— sheriffderek'3

3

<a href="javscript:void(0)" ng-click="logout()">Sign out</a>将竭诚为您服务也很好

— 马里奥斯Fakiolas

88

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

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

根据角度文件，

ngClick和ngFocus等指令在该表达式的范围内公开了$ event对象。

— atroberts20
source

11

这是一个很好的解决方案。如果您有href，则可以右键单击以在新标签页中将其打开，但是在左侧单击将其称为ng-click。正是我想要的东西

— 汤姆·格兰特

再次是一个很好的答案。左，右键的工作

— 周杰伦周杰伦周杰伦

非常适合允许Bootstrap轮播控件而不触发路由。谢谢！

— 杰森·麦加德

完善！我可以继续链接并在Google中获得更多索引，并使用ng-click调用Ajax。谢谢。

— Guilherme IA

很好的解决方案，快速而有用。谢谢！

— Josue Rocha

72

这是另一种解决方案：

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

即只是从href属性中删除＃

— 穆罕默德Towfique伊玛目
source

1

对于提出的问题，这应该是解决方案。同样在Angular 1.1.5上工作

— Sindre

18

看来<a href="" ng-click="">会阻止在Android 2.3.x浏览器中进行ng-click。我终于使用<a href="javascript:void(0)" ng-click="">

— duckegg 2013年

1

Duckegg的建议是最好的一个

— 吉日Vypědřík

26

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

模板：

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

指示：

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

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

— 蛋白质
source

此解决方案有效，并且仅更改左键单击行为，右键单击保持不变（上下文菜单），包括在href中链接的可能性。因此，与TooMuchTenacious（实际上更直接地回答问题）相比，这是一个更通用的解决方案。

— Exocom

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情况。

— p926
source

13

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

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

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

— 哈蒙
source

正常，该链接不会更改您的网址，也不会标记为已访问。最佳答案！

— Jim109 2015年

10

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

首先，你的前提

“ 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正确地推广了MVC模式。使用此解决方案，您的html模板与javascript逻辑混合在一起。您应尽量避免这种情况，并将逻辑放入角度控制器中。所以更好的方法是

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

在您的logout（）方法中：

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

现在，click事件将不会到达浏览器，因此它将不会尝试加载指向的链接href。（但是请注意，如果用户右键单击该链接并直接打开该链接，则根本不会发生click事件。相反，它将直接加载该href属性所指向的url 。）

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

a {
   color:pink;
}

PS1：

建议使用以下答案：

<a href .../>

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

<a href="" .../>

这两种方式本质上是相同的。

— 坎纳
source

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>

展开摘要

— 安娜
source

2

我认为您不需要从href中删除“＃”。以下与Angularjs 1.2.10兼容的作品

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

— 索拉卜
source

1

您也可以尝试以下操作：

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

— 里三
source

0

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

我将波纹管代码添加到控制器中。

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

在我的查看页面上，添加以下代码。

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

— 贝尔吉加·穆罕默德·阿明
source

0

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

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

那你就可以

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

— 施特里茨瓦尔德
source

0

请检查一下

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

 $scope.logout = function(event)


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

— 阿杰·马尔霍特拉（Ajay Malhotra）
source

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>

— 克里希纳
source

0

这对我有用

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

— Soukaina Benchekroun
source