77

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

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

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

4

4 回答 4

149

在 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"

于 2013-05-30T13:47:57.683 回答
36

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

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

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

于 2016-05-25T07:48:24.077 回答
7

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

因此 PDF 将通过 html5mode 和 routeProvider 并且浏览器只会转到该 url。

于 2013-05-30T13:40:44.433 回答
4

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

.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);
}])
于 2015-10-20T10:00:37.210 回答