javascript 应用程序外的角度 Ui 路由器链接但在同一域中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20980201/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
angular Ui-router link out of app but in the same domain
提问by Anton Rodin
I'm trying to use ui-router in my angular app.
我正在尝试在我的 angular 应用程序中使用 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.
然后 url 改变，什么也没发生。
Question:How handle external link to other pages on site with ui-router?
问题：如何使用ui-router处理网站上其他页面的外部链接？
回答by Heston Liebowitz
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>
<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 处理的链接。
回答by Reactgular
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 正在触发otherwise()对 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 路径，这将导致无限重定向循环。
回答by mattwad
On a single element, you can just do:
在单个元素上，您可以执行以下操作：
<a href="some/url" ng-click="$event.stopPropagation()">A link outside of the app</a>
回答by Anton Rodin
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
第一点是：默认情况下，angular handle 所有单击元素并尝试通过路由系统解析 href 属性的值。关于它的信息在这里Angular docs
Second point is: I used wrong base url. Instead of using /segmentsI 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/。字符串末尾的斜杠具有非常重要的意义！不在我的基础上的 Angular 跳过链接（/segments/）。
Other solution described here. But I suggest to use
此处描述的其他解决方案。但我建议使用
$rootElement.off('click');
in some controller, not in runfunction. In my case run function has been called before angular binds click handle.
在某些控制器中，而不是在运行功能中。在我的情况下，在角度绑定单击句柄之前已经调用了 run 函数。
So good luck to everybody! :)
所以祝大家好运！:)
