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

I'm trying to use ui-router in my angular app.

我正试图在我的角应用程序中使用ui-router。

My base url is "/segments" and I use base tag to define it.

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

<base href="/segments" />

Here is my routing config:

这是我的路由配置：

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('!');

When I click to link tag I can't get out from my app to other resource on my site, i.e. I click to tag

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

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

and then url changing and nothing happened.

然后网址改变，什么也没发生。

Question: How handle external link to other pages on site with ui-router?

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

4 个解决方案

#1

This might be helpful: angular.js link behaviour - disable deep linking for specific URLs

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

To summarize, you can tell Angular to ignore a link for routing purposes by adding target="_self" to it. This will allow the browser to handle the link unencumbered by Angular. For example:

总而言之，您可以通过向其添加target =“_ self”来告知Angular忽略用于路由目的的链接。这将允许浏览器处理不受Angular阻碍的链接。例如：

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

我的非角色链接

This approach works for links that you know beforehand should not be handled by Angular.

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

#2

What's happening is ui-router is triggering an otherwise() response for the URL, because it failed to match the URL to the list of known states.

发生了什么事情是ui-router正在触发对URL的否则（）响应，因为它无法将URL与已知状态列表相匹配。

You see the URL update in the browser, but nothing happens because the error was unhandled in the Javascript code.

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

You can add a handler for unmatched states like this.

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

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

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

When ui-router fails to match a state it will call the otherwise() callback. You can then manually force the browser to go to that URL.

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

EDIT: Warning, this will cause an infinite redirect loop if the URL is an Angular path with a bad route.

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

#3

On a single element, you can just do:

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

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

#4

First point is: angular handle all click on a element by default and trying resolve value of href attribute via routing system. Information about it is here Angular docs

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

Second point is: I used wrong base url. Instead of using /segments I should use /segments/. Slash at end of string has a very significant meaning! Angular skip links which isn't on my base (/segments/).

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

Other solution described here. But I suggest to use

这里描述的其他解决方但我建议使用

$rootElement.off('click');

in some controller, not in run function. In my case run function has been called before angular binds click handle.

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

So good luck to everybody! :)

祝大家好运！ :)

#1