为什么 AngularJS 会破坏自引用锚链接？答案

【问题标题】：Why does AngularJS break self-referencing anchor links?为什么 AngularJS 会破坏自引用锚链接？
【发布时间】：2013-12-17 00:56:40
【问题描述】：

如果你在这样的地方...

http://www.domain.com/index.html

...并且您有一个指向同一位置的链接...

<a href="/index.html">My Link</a>

... 然后点击链接什么也不做。通常你会像往常一样被重定向到页面；刷新页面的便捷方式（无需完全刷新）。

我已经将这种奇怪行为的罪魁祸首追溯到 AngularJS。

观察下面的例子：

<body>
    <a href="">Sample Link</a>

    <script>
        var SampleApp = angular.module("SampleApp", []);
    </script>
</body>

http://jsfiddle.net/7vqD9/

通过单击链接，浏览器会尝试转到相同的位置（因为href 为空白）。 这是正常的。

现在让我们激活 Angular：

<body ng-app="SampleApp">
    <a href="">Sample Link</a>

    <script>
        var SampleApp = angular.module("SampleApp", []);
    </script>
</body>

http://jsfiddle.net/7bEp3/

点击链接什么都不做。

为什么 AngularJS 会以这种方式断开链接？我失踪有什么明显的原因吗？

【问题讨论】：

stackoverflow.com/a/16003013/1085699 应该会给你你正在寻找的答案
完美。添加target="_self" 就可以了。
@RowanFreeman 这也是我所做的。像魅力一样工作。

标签： javascript html angularjs

【解决方案1】：

为什么 Angular 会阻止 href 的经典行为？

来自Mastering web component with AngularJs：

AngularJS 预先绑定了 a 指令，它可以防止省略 href 属性时对链接的默认操作。这个允许我们使用 a 标签和 ng-click 指令。例如，我们可以如下调用atag：
<a ng-click='showFAQ()'>Frequently Asked Questions</a>
没有默认导航操作的 a 标签很方便，因为几个 CSS 框架使用 a 标签来呈现不同类型的视觉元素，其中导航操作没有多大意义。 例如 Twitter 的 Bootstrap CSS 框架使用 a 标签来在选项卡和手风琴组件中呈现标题。

要保留的关键字是：“handy”

【讨论】：

【解决方案2】：

Angular 会覆盖 a 标签：https://github.com/angular/angular.js/blob/master/src/ng/directive/a.js

这里要注意的行是：

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

Angular 这样做是因为 ngHref，它仅在 angular 和 scope 完全加载后才设置 href，从而防止用户意外转到 /{{pageUrl}}/。

如果你想重新加载页面，你应该看看Angular提供的$location服务。

【讨论】：