带有 html5Mode 的 Angularjs 普通链接答案

【问题标题】：Angularjs Normal Links with html5Mode带有 html5Mode 的 Angularjs 普通链接
【发布时间】：2016-03-18 01:01:27
【问题描述】：

我在 html 5 模式下使用 angularjs。这似乎控制了页面上的所有href。但是，如果我想要链接到应用程序的同一域中的某些内容，但实际上不在应用程序中，该怎么办。一个例子是 pdf。

如果我这样做<a href="/pdfurl"> angular 将尝试使用 html5mode 并使用路由提供程序来确定应该加载哪个视图。但我实际上希望浏览器以正常方式访问该页面。

这样做的唯一方法是与路由提供者制定规则并使用 window.location 将其重定向到正确的页面吗？

【问题讨论】：

标签： angularjs

【解决方案1】：

如果您不希望 Angular 控制 href。在链接上放置一个目标属性。

因此 PDF 将绕过 html5mode 和 routeProvider，浏览器将直接转到该 url。

【讨论】：

【解决方案2】：

在HTML5模式下，A标签不被重写的三种情况：来自angular docs

包含target 属性的链接。示例：<a href="/ext/link?a=b" target="_self">link</a>
指向不同域Example: <a href="http://angularjs.org/">link</a> 的绝对链接
当base 定义为Example: <a href="/not-my-base/link">link</a> 时，以'/' 开头的链接指向不同的基本路径

所以你的情况是 1. 添加target="_self"

【讨论】：

多么奇怪的修复，但非常感谢！我认为 Angular 应该提供一种更漂亮的方式来表明这一点..
这不是解决办法。原因是A 被当作指令处理。

【解决方案3】：

其他解决方案。所有链接都将正常工作（重新加载页面）。 ng-href="/path" 标记的链接将在 pushState 上播放。 Small JS hack 帮助它。

.config(["$locationProvider", function($locationProvider) {
    // hack for html5Mode customization
    $('a').each(function(){
        $a = $(this);
        if ($a.is('[target]') || $a.is('[ng-href]')){
        } else {
            $a.attr('target', '_self');
        }
    });

    $locationProvider.html5Mode(true);
}])

【讨论】：

+1。 Eduard Gamonal 的回答是最完整的，但这绝对是使用目标标签的一个很大的变化，并且与我的团队所处的情况特别相关，我们计划在其中提取由另一个团队维护的共享标头。
既然是.config，不就只运行一次吗？也就是说，如果您有多个包含内容的虚拟页面，这似乎只会扫描当前在 DOM 中的那些条目，而不是稍后可以作为 URL 路径的一部分获取的内容。

【解决方案4】：

从 Angular v1.3.0 开始，位置提供程序有一个新的 rewriteLinks 配置选项。这会“劫持”页面上的所有链接：

module.config(function ($locationProvider) {
    $locationProvider.html5Mode({
        enabled: true,
        rewriteLinks: false
    });
});

虽然对所有链接禁用此行为可能不是您的本意，但我将其发布给与我一样希望在 html5 模式下使用 $location 仅更改 URL 而不影响所有链接的其他人。

【讨论】：