Question

我的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输入地址栏并点击输入时，一切正常。

相关的Plunker：http://plnkr.co/edit/d3Z0tOwC3VCTPqGiB0df?p=preview

如何将ui-sref与默认子状态结合使用？

Answer 1

抽象状态无法直接定位。它们主要作为建立儿童国家的基础。它与URL一起工作的唯一原因是/ parent被.when

捕获

这意味着当您使用

调用孩子时

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

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

所以，永远不要以抽象状态为目标。这就像在门框内有一扇门。您只能打开门（儿童）并与之互动，但不能直接与框架（父母）交互。但是，当您与门进行交互时，门和框架是系统加载的一部分。

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

有关详细信息，请参阅此处： https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views#abstract-states

Answer 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的指令，减去抽象的状态限制。

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

2 个答案: