角度Ui-router链接应用程序但在同一个域中

Question

我正试图在我的角应用程序中使用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>

然后网址改变,什么也没发生.

问题:如何使用ui-router处理现场其他页面的外部链接？

Answer 1

这可能会有所帮助:angular.js链接行为 - 禁用特定URL的深层链接

总而言之,您可以通过添加链接来告知Angular忽略用于路由目的的链接target="_self".这将允许浏览器处理不受Angular阻碍的链接.例如:

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

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

Answer 2

发生了什么事情是ui-router正在触发otherwise()对URL 的响应,因为它无法将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路径,这将导致无限重定向循环.

Answer 3

在单个元素上,您可以执行以下操作:

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

Answer 4

第一点是：默认情况下，角度处理所有单击元素并尝试通过路由系统解析 href 属性的值。有关它的信息在这里Angular 文档

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

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

$rootElement.off('click');

在某些控制器中，不在运行功能中。就我而言，在角度绑定单击句柄之前已调用运行函数。

祝大家好运！:)