angularjs ui-router 默认子状态和 ui-sref答案

【问题标题】：angularjs ui-router default child state and ui-srefangularjs ui-router 默认子状态和 ui-sref
【发布时间】：2014-07-26 09:14:03
【问题描述】：

我的 ui-router 状态提供程序中有以下状态：

$urlRouterProvider.when('/parent', '/parent/child');
$stateProvider.state('parent', {
     url: "/parent",
     abstract: true
});

$stateProvider.state('parent.child', {
     url: "/child"
});

遵循 ui-router 文档中here 中解释的默认子状态的最佳实践。

但是，当我现在在我的文档中包含一个链接时，在某处使用ui-sref 引用父级，例如<a ui-sref="parent">Link</a>，我总是收到一个错误，说我无法转换到抽象状态。当我在地址栏中手动输入 URL 并按 Enter 时，一切正常。

如何将ui-sref 与默认子状态结合起来？

【问题讨论】：

所有抽象状态都要求您提供具有值<ui-view/> 的template 属性，因为子模板/Url 插入它。现在，如果您按照@Chris-Preston 的建议使用<a ui-sref="parent.child"> 创建了一个href，那么您的网址栏将加载/#/parent/child。这帮助了我，link。至少如果我理解正确的话。如果我错了，请告诉我：S

标签： angularjs angular-ui angular-ui-router

【解决方案1】：

抽象状态不能直接定位。它们主要作为建立子状态的基础。它适用于 URL 的唯一原因是 /parent 被 .when

捕获

这意味着当您使用

调用子级时

<a ui-sref="parent.child">

父级中的子级被加载，这意味着父级将作为其周围的层加载。

因此，永远不要针对抽象状态本身。这就像在门框内有一扇门。您只能打开门（子）并与之交互，但不能直接与框架（父）交互。但是，当您与门交互时，门和框架是加载系统的一部分。

您可以给孩子一个空的 URL，这样它就不会在父状态 URL 上附加任何内容，然后会被加载。

【讨论】：

我当然理解抽象状态的局限性，但我认为如果可以定义默认子状态，也应该可以自动将所有呼叫从父级转发到子级（即逻辑ui-sref 的行为将转发到默认子状态）。在我的情况下，父母目前是抽象的并且不需要，但以后可能会成为它自己的一个页面（想想整个概念的概述页面）。但看起来这不适用于 ui-router。
如前所述，为子状态提供一个空 URL，您可以使用地址栏中的父 URL 访问此子状态。但是，从事情的状态来看，使用应用程序本身的 ui-sref 只能直接针对孩子
这应该被标记为答案并为链接 +1。
是否可以嵌套抽象状态，例如 grandparent.parent.child，其中祖父母和父母都是抽象状态？
既然是这种情况，如何从login 状态转换到抽象dashboard 状态？还是有其他方法可以做到这一点？

【解决方案2】：

如果您想使用$state 方便的抽象状态命名结构，您可以在服务中使用它：

$location.path(
    $state.href('app.some.abstract.state', { some: 'params' })
);

或者这个在模板中（$state 必须在本地或全局$scope 中可用）：

<a ng-href="{{$state.href('app.some.abstract.state', { some: 'params' })}}">...</a>

如果我发现自己经常这样做，我会为此创建一个类似于 ui-sref 的指令，减去抽象状态限制。

【讨论】：