Des imbrications imbriquées avec des états frères, UI-Router et ncyBreadcrumb

Question

J'ai hérité récemment d'un projet utilisant UI-Router pour router entre états dans un site de portail de gestion. Il y a certaines complexités à ce portail qui exigent que nos états soient principalement des frères et soeurs, plutôt qu'un parent/enfant apparenté. Cela a créé un problème pour que le fil d'Ariane fonctionne avec ncyBreadcrumb. Avant de laisser tomber et de développer quelque chose qui m'est propre, je me demande s'il existe un moyen de résoudre mes problèmes.

L'exemple classique d'ui-router est la liste de contacts. Vous pouvez avoir un indice état, au-dessous duquel vous avez contacts.list et contacts.details. Les deux états des contacts sont imbriqués dans un index qui a probablement une disposition commune (et pourrait bien être un état abstrait). Maintenant, dans cette simple hiérarchie à deux niveaux, il est assez difficile d'utiliser ncyBreadcrumb et de forcer l'état de détail à être un "enfant de fil d'Ariane" de l'état de la liste.

Mon application de portail a un peu plus de complexité. Nous avons un état de portail racine, qui contient notre disposition de base ... une barre horizontale en haut, une barre de navigation sur le côté gauche et la zone de contenu principale (notre ui-view). Nous avons plusieurs états de liste, qui montrent des tables d'informations provenant d'un contexte "racine". Nous avons également plusieurs états de détail, qui montrent certains panneaux contenant des détails de l'élément sélectionné, par exemple "cluster", et ils montrent également une table des éléments enfants pour cet élément particulier. Toutes nos vues de détail peuvent être routées deux de deux façons, et en fonction de la façon exacte dont l'utilisateur navigue à travers le portail, le fil d'Ariane peut avoir besoin de montrer plus d'une hiérarchie d'états à deux niveaux.

Voici un exemple d'une plus courte, la navigation directe à un détail d'exemple:

1. utilisateur se connecte à, commence à portal.environments, table voit les détails de l'environnement et subenvironments.
2. L'utilisateur clique sur Instances dans la navigation de gauche, est acheminé vers portal.instances, voit la table d'instances contenant toutes les instances du système entier.
3. L'utilisateur clique sur une instance, est acheminé vers portal.instanceDetails, voit les détails de cette instance.

Dans cet état, le fil d'Ariane doit montrer quelque chose comme:

Instances > XYZ Instance Detail 

Maintenant, c'est l'une des deux façons d'obtenir le détail sur un cluster. L'autre façon est d'explorer tous ses parents. Cliquez sur l'élément de menu Instances dans la barre latérale pour afficher chaque instance du système sous gestion. Les instances peuvent être regroupées en groupes de mise à l'échelle automatique, qui peuvent être organisés en clusters, eux-mêmes organisés en piles, elles-mêmes organisées en sous-environnements, eux-mêmes organisés en environnements. Vous pouvez accéder directement à chacun de ces niveaux à partir du menu de la barre latérale, en affichant chacun de ces éléments dans le système ou en les faisant naviguer depuis leur parent.

Donc, encore une fois avec notre exemple, nous pourrions aussi le faire:

1. utilisateur se connecte, commence à portal.environments, table voit des détails de l'environnement et subenvironments.
2. L'utilisateur clique sur un sous-environnement dans cette table, est routé vers le portail .subEnvironmentDetails, affiche les détails de cet environnement secondaire et une table de toutes les piles de cet environnement secondaire.
3. L'utilisateur clique sur une pile, est acheminé vers portal.stackDetails, voit les détails de cette pile et une table de clusters dans cette pile.
4. L'utilisateur clique sur un cluster, est acheminé vers portal.clusterDetails, voit les détails de ce cluster et une table de groupes de mise à l'échelle automatique dans ce cluster. L'utilisateur clique sur un groupe de mise à l'échelle automatique, est acheminé vers portal.autoScalingGroupDetails, voit les détails de ce groupe de mise à l'échelle automatique et une table d'instances dans ce groupe. L'utilisateur clique sur la même instance et est routé vers portal.instanceDetails, voit les mêmes détails que dans le premier chemin, plus direct, présenté ci-dessus.

Dans ce cas, le fil d'Ariane devrait être plus comme ceci:

Environments > Sub Environment A > Stack B > Cluster C > ASG D > Instance XYZ 

De plus, on peut entrer dans la chaîne à tout moment. La navigation peut être pile -> pile -> cluster -> asg -> instance, ou simplement cluster -> asg -> instance. En raison des variations plutôt non structurées par lesquelles un utilisateur peut naviguer vers le même élément, nous avons du mal à faire fonctionner ncyBreadcrumb. Pour un, alors que je pourrais définir le parent d'un état de façon dynamique dans la config breadcrumb pour cet état ... comment puis-je définir les états de tous les parents dans la chaîne? Jusqu'à présent, j'ai seulement réussi à obtenir deux niveaux de fil d'Ariane ... et généralement le lien vers l'état parent est incorrect (il manque des détails pour l'acheminer correctement).

Est-il possible d'utiliser ui-router et ncyBreadcrumb pour générer de la chapelure pour une navigation aussi flexible? Les états détaillés ne sont pas les enfants d'un seul état ... ils sont les enfants d'au moins deux états parents ... en fonction de la façon dont la navigation a été initiée. Le parent de l'état peut lui-même être un enfant d'autre chose, encore une fois en fonction de la façon dont la navigation a été initiée.

Answer 1

Ce que je fait est:

.state('app.visit', { 
    url: "/visit/:id?date", 
    templateUrl: "views/dialog.newvisit.html", 
    controller: 'DialogNewVisitController', 
    resolve: { 
    currentState: function($rootScope) { 
     $rootScope.saveCurState(); 
    } 
    }, 
    ncyBreadcrumb: { 
    label: 'Visit', 
    parent: function($rootScope) { 
     return $rootScope.getCurState().name; 
    }, 
    } 
}) 

Et quelque part les définit:

$rootScope.getCurState = function() { 
    return $rootScope.curState; 
} 

$rootScope.saveCurState = function() { 
    $rootScope.curState = $state.current; 
}