尝试在侧边栏中突出显示父级时"无法转换为抽象状态"

Question

我正在使用角度UI-Router和bootstrap折叠面板为样式指南构建侧边栏.我的侧边栏是"工作"但我得到了

Error: Cannot transition to abstract state 'parent'

单击子状态时.在我真正的解决方案中,有许多父母有子组,父母确实是抽象的(即他们不代表物理页面或状态).我知道我不能直接链接到父状态,我不相信我,我只需要ui-sref在父面板中设置它们,这样我就可以通过设置ui-sref-active属性让父母保持打开状态.

我在plunker上运行了一个示例:http://plnkr.co/edit/bnvGcaOvzW4que8g3vh7？p = preview

代码供参考:

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

<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>

Answer 1

简答:

只需ui-sref="parent"从代码中删除即可.ui-sref为了使ui-sref-active您按预期工作,不需要此特定属性.

答案很长:

ui-sref-active通过查找具有a的所有子元素ui-sref并将这些元素添加到states附加到元素的数组来工作.在$stateChangeSuccess,每个元素循环遍历此数组,如果找到与数组匹配的状态,则应用该类.

举个例子:

<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>

在上面的例子中,假设app是一个摘要.所有这四个链接都将触发open父元素上的类,因为它们包含在内.它们并非都是app.home结构的一部分并不重要.