"Cannot go to abstract state" when trying to select a parent in the sidebar

Question

I use the angular UI-Router interface and bootstrap collapse to create a sidebar for the style guide. My sidebar is how it works, but I get

Error: Cannot transition to abstract state 'parent'

when clicking child states. In my real solution, there are many parents with child groups, and the parents are really abstract (i.e. they are not a physical page or state). I know that I cannot directly refer to the parent states, and I do not believe that I just need to install them ui-srefin the parent panel so that I can force the parent to remain open by setting ui-sref-active.

I have an example of working on plunker: http://plnkr.co/edit/bnvGcaOvzW4que8g3vh7?p=preview

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

<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

Short answer:

Just remove ui-sref="parent"from your code. This special attribute is ui-srefnot required to ui-sref-activework as you expect.

Long answer:

ui-sref-activeworks by finding all the children of c ui-srefand adding these elements to the array statesattached to the element. In $stateChangeSuccesseach element passes through the array, and if the state is found, which corresponds to the array, then use the class.

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>

, app . 4 open , . , app.home.