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

Question

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

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

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

其遵循其解释为默认子状态的最佳实践这里在UI路由器文档.

但是,当我现在在我的文档中包含一个链接引用父文件时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