Question

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

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

执行此操作的唯一方法是使用路由提供程序制定规则并使用window.location将其重定向到正确的页面吗？

Answer 1

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

Answer 2

从Angular v1.3.0开始，位置提供程序有一个新的rewriteLinks配置选项。这会切换＆＃34;劫持＆＃34;关闭页面上的所有链接：

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

虽然对于所有链接的这种行为可能不是您的意图，但我发布此信息给其他人，像我一样，希望在html5模式下使用$location只更改网址而不影响所有链接

Answer 3

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

因此，PDF将通过html5mode和routeProvider，浏览器将转到该网址。

Answer 4

其他解决方案。所有链接都将正常工作（重新加载页面）。标记为ng-href="/path"的链接将在pushState上播放。小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);
}])

Angularjs Normal链接与html5Mode

4 个答案: