Question

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

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会以这种方式破坏链接？有没有明显的理由让我失踪？

Answer 1

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

来自Mastering web component with AngularJs：

AngularJS预先捆绑了a指令，该指令阻止了省略href属性时对链接的默认操作。这个允许我们使用a标签创建可点击元素 ng-click指令。例如，我们可以按如下方式调用a标记：
<a ng-click='showFAQ()'>Frequently Asked Questions</a>
拥有没有默认导航操作的标签非常方便几个CSS框架使用a标签来呈现不同类型的视觉元素，导航动作没有多大意义。 例如，Twitter的Bootstrap CSS框架使用a标签在标签和手风琴组件中渲染标题。

要保留的关键字是：“方便”

Answer 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而执行此操作，{{3}}仅在角度和范围完全加载后设置href，从而防止用户意外转到/{{pageUrl}}/。

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

为什么AngularJS打破了自引用锚链接？

2 个答案: