twitter-bootstrap 尝试在侧边栏中突出显示父项时“无法转换为抽象状态”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30512717/
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
"Cannot transition to abstract state'" when trying to highlight parent in sidebar
提问by uuunk
I am using angular UI-Router and bootstrap collapse panels to build a sidebar for a style guide. My sidebar as is "works" but I'm getting a
我正在使用 angular UI-Router 和 bootstrap 折叠面板来构建样式指南的侧边栏。我的侧边栏“有效”但我得到了一个
Error: Cannot transition to abstract state 'parent'
Error: Cannot transition to abstract state 'parent'
when clicking the child states. In my real solution there are many parents with child groupings and the parents truly are abstract (i.e. they don't represent a physical page or state). I know I can't link directly to the parent states, and I don't believe I am, I just need to set their ui-srefin the parent panel so that I can get the parent to stay open by setting the ui-sref-activeattribute.
单击子状态时。在我的真正解决方案中，有许多父级具有子分组，并且父级确实是抽象的（即它们不代表物理页面或状态）。我知道我不能直接链接到父状态，我不相信我，我只需要ui-sref在父面板中设置它们，这样我就可以通过设置ui-sref-active属性让父状态保持打开状态。
I have an example running on plunker: http://plnkr.co/edit/bnvGcaOvzW4que8g3vh7?p=preview
我有一个在 plunker 上运行的示例：http://plnkr.co/edit/bnvGcaOvzW4que8g3vh7?p=preview
code for reference:
代码参考：
angular.module('app', ['ui.router'])
.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise("/");
$stateProvider
.state('home', {
url: "/",
templateUrl: "layout.html"
})
.state('parent', {
abstract: true,
url: '/parent',
templateUrl: "layout.html"
})
.state('parent.child', {
url: "/child",
templateUrl: "child.html"
})
});
layout.html
布局.html
<div class="container-fluid">
<div class="row">
<div class="col-xs-3">
<a ui-sref="home">Home</a>
<div class="panel-group" id="sidebar">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#sidebar" data-target="#parent"
class="collapsed">Parent</a>
</h4>
</div>
<div id="parent" ui-sref="parent" class="panel-collapse collapse" ui-sref-active="in">
<div class="list-group">
<a ui-sref="parent.child" ui-sref-active="active" class="list-group-item">Child</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-9">
<div ui-view></div>
</div>
</div>
</div>
回答by joshuahiggins
Short Answer:
简答：
Just remove ui-sref="parent"from your code. This particular ui-srefattribute is not required in order for ui-sref-activeto work as you expect.
只需ui-sref="parent"从您的代码中删除。ui-sref为了ui-sref-active按您的预期工作，不需要此特定属性。
Long Answer:
长答案：
ui-sref-activeworks by finding all child elements with a ui-srefand adding these elements to a statesarray attached to the element. On $stateChangeSuccess, each element loops through this array and if a state is found that matches the array, then the class is applied.
ui-sref-active通过查找带有 a 的所有子元素ui-sref并将这些元素添加到states附加到该元素的数组中来工作。On $stateChangeSuccess，每个元素循环遍历此数组，如果找到与数组匹配的状态，则应用该类。
As an example:
举个例子：
<ul>
<li ui-sref-active="open">
<a ui-sref="app.home">Link</a>
<ul>
<li>
<a ui-sref="app.home.this"></a>
</li>
<li>
<a ui-sref="app.home.that"></a>
</li>
<li>
<a ui-sref="app.home.whatever"></a>
</li>
<li>
<a ui-sref="temp"></a>
</li>
</ul>
</li>
</ul>
In the above example, assume appis an abstract. All 4 of those links will trigger the openclass on the parent element, as they are contained within. It doesn't matter that they are not all part of the app.homestructure.
在上面的例子中，假设app是一个抽象。所有这 4 个链接都将触发open父元素上的类，因为它们包含在其中。它们不都是app.home结构的一部分并不重要。
