Angularjs与html5Mode的正常链接

我正在使用html5模式的angularjs。 这似乎控制了页面上的所有href。 但是,如果我想在应用程序的同一个域中有一个链接,但实际上并不在应用程序中。 一个例子就是pdf。

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

要做到这一点的唯一方法是与路线提供商制定一个规则,并redirect到正确的页面与window.location?

在HTML5模式下,有三种情况,A标签不被重写:来自angular度文档

  • 包含target属性的链接。 例如: <a href="/ext/link?a=b" target="_self">link</a>
  • 指向不同域的绝对链接Example: <a href="http://angularjs.org/">link</a>
  • 以“/” Example: <a href="/not-my-base/link">link</a>在定义基础时导致不同的基本pathExample: <a href="/not-my-base/link">link</a>

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

从Angular rewriteLinks ,位置提供者有一个新的rewriteLinksconfiguration选项。 这会切换“劫持”页面上的所有链接:

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

虽然disablig这种行为的所有链接可能不是你的意图,我发布这个为其他谁像我一样,希望使用HTML5模式$location只更改url,而不会影响所有链接。

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

所以PDF将通过html5mode和routeProvider,浏览器将只是去那个url。

其他解决scheme 所有链接将正常工作(重新加载页面)。 由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); }])