javascript - AngularJS标签链接不起作用

Answer 1

从邮件列表中我得到了一个答案：

你有没有机会将你的 $locationProvider 配置为 html5Mode？如果是，这将导致您的问题。您可以通过将 target="_self" 添加到您的标签来强制它始终转到 url。试一试。

我已配置为使用 HTML5，因此添加target="_self"到标签解决了问题。仍在研究为什么会这样。

Answer 2

Not sure if this has been updated since this post was answered, but you can configure this in application startup. Setting the rewriteLinks to false re-enables your a tags, but still leaves html5mode on, which comes with all its own benefits. I have added a bit of logic around these settings to revert html5mode in browsers where window.history is not supported (IE8)

app.config(['$locationProvider', function ($locationProvider) {

    if (window.history && window.history.pushState) {
        $locationProvider.html5Mode({
            enabled: true,
            requireBase: true,
            rewriteLinks: false
        });
    }
    else {
        $locationProvider.html5Mode(false);
    }
}]);

Angular Docs on $locationProvider

The benefits of html5mode vs hashbang mode

Answer 3

我知道这篇文章很旧，但我最近也遇到了这个问题。我的 .html 页面有基础

//WRONG!
<base href="/page" />

和修复：

//WORKS!
<base href="/page/" />

注意 'page' 后面的正斜杠 ('/')。

不确定这是否适用于其他情况，但试一试！

Answer 4

AngularJS 受到文档稀疏的困扰，我希望他们的发展势头能够改善它。我认为 AngularJS 的主要目的是作为一个SPA，也许默认情况下停用所有 a 标签背后的想法允许人们轻松地将 angular 合并到一些已经存在的 html 中。

这允许将“传统”网站（以及相互链接的脚本页面）的默认“路由”行为快速重构为角度路由系统，这更像是一种 MVC 方法，更适合 Web 应用程序。

Answer 5

找到这一行：

$locationProvider.html5Mode(true)

将其更改为：

$locationProvider.html5Mode(true).hashPrefix('!')

如果没有，请将此行包含在 index.html 的头部。

<base href="/">

Answer 6

我看到这是旧的，但这是谷歌上最好的结果之一。因此，如果您使用的是 Angular 7，并且只想链接几个文件，那么只需将其放入“assets”目录：

现在，当您要链接文件时，只需使用 href 标记，如下所示：

  <img src="assets/ang_1.png" alt="Angular">

注意：默认情况下您只能链接到 assets 文件夹，因此您必须将文件放在那里。