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

I have the following states in my ui-router state provider:

在我的ui-router状态提供程序中，我有以下状态:

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

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

Which follows the best practice for having a default child state as explained here in the ui-router docs.

它遵循了在ui-router文档中解释的具有默认子状态的最佳实践。

However, when I now include a link in my document somewhere referencing parent with ui-sref such as <a ui-sref="parent">Link</a> I always get an error saying I cannot transition to an abstract state. When I enter the URL manually into the address bar and hit enter everything works fine.

但是，当我现在在文档中包含一个链接时，引用了父类的父类，比如链接，我总是得到一个错误，说我不能过渡到一个抽象的状态。当我在地址栏中手动输入URL并点击进入，一切正常。

相关砰砰作响:http://plnkr.co/edit/d3Z0tOwC3VCTPqGiB0df?p=preview

How can I combine ui-sref with default child states?

如何将ui-sref与默认子状态结合?

2 个解决方案

#1

abstract states can not be targeted directly. They mainly serve as a foundation to build child states on. The only reason it works fine with the URL is that the /parent gets caught by the .when

抽象状态不能直接针对。它们主要作为建立儿童国家的基础。它对URL的良好工作的唯一原因是/parent被when捕获

That means when you invoke a child using

这意味着当您调用子节点时

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

the child inside the parent gets loaded, meaning the parent will be loaded as the layer around it.

父类内部的子类被加载，这意味着父类将作为其周围的层被加载。

So, never target an abstract state itself. It's like having a door inside a door frame. You can only open and interact with the door (child), but never with the frame (parent) directly. However, when you interact with the door, the door and the frame are part of a system that gets loaded.

所以，永远不要把目标对准一个抽象的状态本身。就像门框里有一扇门一样。您只能打开并与门(子)交互，但不能直接与框架(父)交互。然而，当你与门交互时，门和框架是系统的一部分，系统会被加载。

You can give the child an empty URL, so that it doesn't append anything to the parent state URL and will then be loaded.

您可以给这个孩子一个空的URL，这样它就不会将任何东西附加到父状态URL，然后将被加载。

See here for more info: https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views#abstract-states

更多信息请参见这里:https://github.com/angular-ui/ui- router/wiki/nested -state -%26- nested - views # abstractstates

#2

If you want to use $state's convenient naming structure for abstract states, you can use this in a service:

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

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

Or this in a template ($state must be available in the local or global $scope):

或者在模板中($state必须在本地或全局$scope中可用):

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

If I found myself doing this regularly, I would create a directive similar to ui-sref for this, minus the abstract state limitation.

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

#1