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通过查找具有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结构的一部分并不重要。

尝试突出侧栏中的父级时“无法过渡到抽象状态”

1 个答案: