假设我有一个锚标记,比如

<a href="#" ng-click="do()">Click</a>

如何防止浏览器在AngularJS中导航到# ?


当前回答

你应该做的是,完全省略href属性。

如果你看一下a element指令(它是Angular核心的一部分)的源代码,它在第29 - 31行声明:

if (!element.attr(href)) {
    event.preventDefault();
}

这意味着Angular已经解决了没有href的链接问题。你仍然有唯一的问题是css问题。你仍然可以将指针样式应用于具有ng-clicks的锚点,例如:

a[ng-click] {
    /* Styles for anchors without href but WITH ng-click */
    cursor: pointer;
}

因此,你甚至可以通过用一种微妙的、不同的样式来标记真正的链接,从而使你的网站更容易访问。

编码快乐!

其他回答

所以阅读这些答案,@Chris仍然有最“正确”的答案,我想,但它有一个问题,它没有显示“指针”....

所以这里有两种方法来解决这个问题,而不需要添加游标:指针样式:

使用javascript:void(0)代替#: <a href="javascript:void(0)" ng-click="doSomething()“>做< / > 在ng-click指令中使用$event.preventDefault()(这样你就不会用dom相关的引用来破坏你的控制器): <a href="#dontGoHere" ng-click="doSomething();$ event.preventDefault ()“>做< / >

就我个人而言,我更喜欢前者而不是后者。void(0)还有这里讨论的其他好处。在那个链接中也有关于“不显眼的JavaScript”的讨论,这是最近才出现的,并不一定直接适用于angular应用程序。

另一种可能是:

<span ng-click="do()">Click</span>

如果你从来不想去href…您应该更改标记,使用按钮而不是锚标记,因为从语义上讲,它既不是锚也不是链接。相反,如果你有一个按钮,做一些检查,然后重定向,它应该是一个链接/锚标签,而不是一个按钮…用于SEO目的以及测试[此处插入测试套件]。

对于你只想有条件地重定向的链接,比如提示保存更改,或确认脏状态…你应该使用ng-click="someFunction($event)"和在someFunction上你的validationError preventDefault和或stopPropagation。

而且,你能做并不意味着你应该做。Javascript:void(0)工作得很好…但是由于邪恶的黑客/破解者,浏览器标记应用程序/网站在href中使用javascript…看不出有什么理由在上面低头打字。

从2010年到现在已经是2016年了,没有理由在任何地方使用像按钮一样的链接……如果你仍然要支持IE8及以下版本,你需要重新评估你的公司。

尽管雷诺给出了一个很好的解决方案

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

我个人发现在某些情况下还需要$event.stopPropagation()来避免一些副作用

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

就是我的解

我需要存在href属性的值退化(当js被关闭),所以我不能使用空href属性(或“#”),但上面的代码没有为我工作,因为我需要一个事件(e)变量。我创建了自己的指令:

angular.module('MyApp').directive('clickPrevent', function() {
  return function(scope, element, attrs) {
    return element.on('click', function(e) {
      return e.preventDefault();
    });
  };
});

在HTML中:

<a data-click-prevent="true" href="/users/sign_up" ng-click="openSignUpModal()">Sign up</a>