AngularJS为什么会中断自引用锚链接？

Rowan Freeman 发表于 Dev

罗恩·弗里曼

如果您在这样的位置...

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以这种方式断开链接？我有什么明显的原因失踪吗？

米克378

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

从使用AngularJs掌握Web组件：

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。