Angular 应用程序中的外部链接答案

【问题标题】：External Links in Angular AppAngular 应用程序中的外部链接
【发布时间】：2015-10-15 03:02:55
【问题描述】：

我正在将 Angular 整合到现有 Rails 应用程序的单个页面中。

一切都与使用以下页面内的路由完美配合

app.config(function($routeProvider, $locationProvider) {
    $routeProvider
      .when('/services/:id', {
        templateUrl: "/javascripts/angular/templates/service_ui/service.html",
        controller: "ServiceCtrl"
     })

     $locationProvider.html5Mode(true);
});

但是，我想保持与 Angular 无关的链接的正常功能。例如，我们在标头中有许多链接，这些链接链接到其他地方，现在正被角度路由器捕获。

我在以下位置找到了一些潜在的解决方案：https://groups.google.com/forum/?fromgroups#!topic/angular/basidvjscRk

但是基本路径方法似乎不起作用..并且 target="_self" 方法相当突兀。有没有更好的方法让角度忽略配置函数中未指定的路由？

我知道有一个 .otherwise() 方法，但这似乎又是一个 hack。我错过了什么吗？

非常感谢！

【问题讨论】：

我认为 Google Groups 的答案非常可靠。 target="_self" 方法似乎绝对符合 Angular 的精神，因为它是解决问题的声明式方法。
可能重复：stackoverflow.com/questions/13023338/…
target="_self" 在将 Angular 与 turbolinks 结合使用（对于同站点页面）时，似乎会导致整个页面重新加载。
Angularjs Normal Links with html5Mode的可能重复

标签： angularjs angular-routing

【解决方案1】：

我们有一个相对“传统”的网络应用程序，因为大多数链接都会触发整页重新加载；很少有链接通过 Angular 的路由系统。在我们的模块定义之后，我们有以下内容：

app.run(function($location, $rootElement) {
  $rootElement.off('click');
});

这会停止 built-in interception of clicks，当您单击链接时，Angular 会使用该 built-in interception of clicks 来操作 URL 等；问题是，您现在必须手动使用 $location，只要您希望 Angular 执行其 URL 魔术（例如，通过 ngClick 和相应地操作 $location 的函数）。

您可以考虑使用$rootElement.off 结合特殊指令或配置函数，在您检测到包含特定 URL 片段的链接上重新安装此行为。

【讨论】：

我在找这个。谢谢。

【解决方案2】：

另一个可能对您有用的选项是更改 $rootElement：链接拦截仅发生在声明为 ng-app 的元素内。

就我而言，我从<body ng-app="myApp"> 切换到<section id="my-rich-area" ng-app="myApp">。

这对我有用，因为我在该部分中没有任何同域、非角度链接，ymmv。

【讨论】：