应用程序外的角度 Ui-router 链接但在同一域中答案

【问题标题】：angular Ui-router link out of app but in the same domain应用程序外的角度 Ui-router 链接但在同一域中
【发布时间】：2014-01-07 19:34:50
【问题描述】：

我正在尝试在我的 Angular 应用中使用 ui-router。

我的基本网址是“/segments”，我使用基本标签来定义它。

<base href="/segments" />

这是我的路由配置：

var base = "/segments"

$stateProvider
  .state('list', {
    url: base,
    controller: 'FilterLestCtrl',
    templateUrl: '/segments/partial?partial=list'
  })

  .state('new', {
    url: base + '/new',
    data: {
      mode: 'new'
    },
    controller: 'SegmentFormCtrl',
    templateUrl: '/segments/partial?partial=edit'
  })

  .state('edit', {
    url: base + '/:id/edit',
    data: {
      mode: 'edit'
    },
    controller: 'SegmentFormCtrl',
    templateUrl: '/segments/partial?partial=edit'
  });

$locationProvider.html5Mode(true).hashPrefix('!');

当我点击链接标签时，我无法从我的应用程序转到我网站上的其他资源，即我点击标签

<a class="" href="/widgets">Widgets</a>

然后 url 改变了，什么也没发生。

问题：如何使用 ui-router 处理指向站点其他页面的外部链接？

【问题讨论】：

标签： javascript angularjs angular-ui-router

【解决方案1】：

这可能会有所帮助：angular.js link behaviour - disable deep linking for specific URLs

总而言之，您可以通过向其添加target="_self" 来告诉Angular 忽略一个用于路由目的的链接。这将允许浏览器处理不受 Angular 影响的链接。例如：

<a href="/my-non-angular-link" target="_self">My Non-Angular Link</a>

这种方法适用于您事先知道不应由 Angular 处理的链接。

【讨论】：

基于我对此进行的有限测试，如果您将其与 Turbolinks 结合使用，效果不佳（使用 _self 指定链接似乎会导致整个页面重新加载）。

【解决方案2】：

发生的情况是 ui-router 正在触发 URL 的 otherwise() 响应，因为它未能将 URL 与已知状态列表匹配。

您在浏览器中看到 URL 更新，但没有任何反应，因为错误未在 Javascript 代码中处理。

您可以为这样的不匹配状态添加处理程序。

var stateHandler = function($urlRouterProvider)
{
    $urlRouterProvider.otherwise(function($injector, $location)
     {
         window.location = $location.absUrl();
     });
};

YourAngularApp.config(['$urlRouterProvider',stateHandler]);

当 ui-router 无法匹配某个状态时，它将调用 otherwise() 回调。然后，您可以手动强制浏览器转到该 URL。

编辑：警告，如果 URL 是带有错误路由的 Angular 路径，这将导致无限重定向循环。

【讨论】：

在某些情况下，当我转到下一页然后尝试返回时，地址栏中的 URL 会更改，但页面不会更改。发生在 Chrome 和 Safari 中。有其他人看过这个吗？
我已经看到这种情况一直在发生。虽然我喜欢这种方法的一般性质，但后退按钮需要工作。
@HestonLiebowitz 回去时你指的是成功的路线还是失败的路线？
我看到成功重定向到外部页面会发生这种情况。事实上，单击后退按钮会更改 Angular 应用程序中出现的所有先前页面的 URL 栏，但不会重定向到其中任何一个。这有点像浏览器错误。

【解决方案3】：

在单个元素上，您可以这样做：

<a href="some/url" ng-click="$event.stopPropagation()">A link outside of the app</a>

【讨论】：

【解决方案4】：

第一点是：默认情况下，角度句柄都点击一个元素，并尝试通过路由系统解析 href 属性的值。有关它的信息在这里Angular docs

第二点是：我使用了错误的基本网址。我应该使用 /segments/，而不是使用 /segments。字符串末尾的斜线具有非常重要的意义！不在我的基础 (/segments/) 上的 Angular 跳过链接。

here 描述的其他解决方案。但我建议使用

$rootElement.off('click');

在某些控制器中，而不是在 run 功能中。在我的情况下，在角度绑定点击句柄之前调用了 run 函数。

祝大家好运！ :)

【讨论】：