“Impossible de transition vers l'abstrait de l'état",” en essayant de mettre en évidence des parents dans la barre latérale

Je suis angulaire à l'aide de l'INTERFACE utilisateur du Routeur et bootstrap effondrement des panneaux pour construire une barre latérale pour un guide de style. Ma barre latérale comme "œuvres", mais je suis un

Error: Cannot transition to abstract state 'parent'

en cliquant sur l'enfant, les états. Dans ma vraie solution il y a beaucoup de parents avec des enfants groupements et les parents sont vraiment abstrait (c'est à dire qu'ils ne représentent pas une page physique ou de l'état). Je sais que je ne peux pas lier directement à la société mère des états, et je ne crois pas que je suis, j'ai juste besoin de mettre leur ui-sref dans le panneau parent, de sorte que je puisse obtenir le parent de rester ouvert par le réglage de la ui-sref-active attribut.

J'ai un exemple en cours d'exécution sur plunker: http://plnkr.co/edit/bnvGcaOvzW4que8g3vh7?p=preview

code de référence:

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>

OriginalL'auteur uuunk | 2015-05-28

  1. 5

    Réponse Courte:

    Juste enlever ui-sref="parent" à partir de votre code. Ce ui-sref attribut n'est pas nécessaire pour ui-sref-active de travail comme vous le souhaitez.

    Réponse Longue:

    ui-sref-active œuvres de trouver tous les éléments enfants avec un ui-sref et l'ajout de ces éléments à un states tableau joint à l'élément. Sur $stateChangeSuccess, chaque élément de la boucle par le biais de ce tableau et si un état est trouvée, qui correspond à la matrice, puis la classe est appliquée.

    Comme un exemple:

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

    Dans l'exemple ci-dessus, supposons app est un résumé. Tous les 4 de ces liens, qui va déclencher l' open classe sur l'élément parent, comme ils sont contenus à l'intérieur. Il n'a pas d'importance qu'ils ne sont pas tous partie de la app.home structure.

    Vous êtes à la droite qui ne fonctionne pas à une simple balise HTML (ul/li), et c'est parfaitement logique. Pour quelque raison que ce soit, il ne fonctionne pas dans mon exemple à l'aide du fichier d'amorce de l'effondrement du panneau. Je forké le plunker pour montrer. Je pense qu'il pourrait avoir à faire avec bootstrap, javascript.
    Je ne suis pas la suite. Il semble que toutes les directives de travail dans ce Plunker?
    Il travaille pour l'élément de liste section comme vous l'avez décrit ci-dessus, réussi à ajouter l' text-uppercase classe. Mais dans le bootstrap effondrement panneau de l'exemple ci-dessus, en cliquant sur la page enfant, l'effondrement du panneau ne reste pas ouvert après la nouvelle page. Le ui-sref-active="in" n'est pas ajouté avec succès à la class="panel-collapse collapse" attribut.

    OriginalL'auteur joshuahiggins