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

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

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


当前回答

根据ngHref的文档,你应该可以去掉href或执行href=""。

<input ng-model="value" /><br />
<a id="link-1" href ng-click="value = 1">link 1</a> (link, don't reload)<br />
<a id="link-2" href="" ng-click="value = 2">link 2</a> (link, don't reload)<br />
<a id="link-4" href="" name="xx" ng-click="value = 4">anchor</a> (link, don't reload)<br />
<a id="link-5" name="xxx" ng-click="value = 5">anchor</a> (no link)<br />

其他回答

你应该做的是,完全省略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;
}

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

编码快乐!

你可以将$event对象传递给你的方法,并在它上面调用$event. preventdefault(),这样默认的处理就不会发生:

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

// then in your controller.do($event) method
$event.preventDefault()

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

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

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

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

我需要存在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>

在我的例子中,Angular: 10 -工作

  <a [routerLink]="" (click)="myFunc()"> Click me </a>

更新:此方法将重新加载解析器。由于@Meeker