无法过渡到抽象状态'"当尝试在侧边栏中突出显示父元素时

"Cannot transition to abstract state'" when trying to highlight parent in sidebar

本文关键字：侧边栏 显示 元素 抽象 过渡到 状态 quot      更新时间：2023-09-26

我使用angular UI-Router和bootstrap折叠面板来构建样式指南的侧边栏。我的侧边栏是"works"但是我得到了一个

Error: Cannot transition to abstract state 'parent'

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

我有一个例子运行在活塞: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>

短答:

从你的代码中删除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是一个抽象。所有4个链接都将触发父元素上的open类，因为它们包含在父元素中。它们不都是app.home结构的一部分也没关系。

相关文章：