uu-router angularjs: ottieni l'elenco degli stati figlio di un determinato stato

Question

Conosci un modo in ui-router per ottenere l'elenco degli stati figlio di un determinato stato?

Sto implementando una SPA complessa con una navigazione profonda di 4 livelli utilizzando un router.

Vorrei implementare un'interfaccia della scheda di navigazione per il secondo livello generato automaticamente dalla tabella del router.

Per questo, ho bisogno di ottenere l'elenco dei figli diretti di un dato stato (forse è uno stato astratto). L'unico modo che ho trovato per ottenere gli stati è di fare un $state.get() e ottenere l'elenco completo degli stati, ma ciò significa che dovrò analizzare gli stati figlio da solo, e penso che sia già scritto nel codice ui -router.

Lascio questa domanda qui nel caso in cui ci sia qualcuno con esperienza nel codice sorgente o che conosca un plugin o un modulo che può aiutarmi in questo. Nel frattempo farò una ricerca per conto mio e pubblicherò i risultati se trovo qualcosa.

Answer 1

Alla fine, ho dovuto implementare la funzionalità da solo.

Nel controllore del percorso astratto che ha l'interfaccia scheda, filtrato gli stati usando un'espressione regolare approfittando della convenzione di denominazione di default per le rotte:

var routeName='Root.Parent'; // this is the "actual" route 

// this regex is going to filter only direct childs of this route. 
var secondRouteOnlyRegex = new RegExp(routeName + "\.[a-z]+$", "i"); 
var states = $state.get(); 

// this uses lodash to filter the states based on the regex 
var navLinks = _.filter(states, (s) => { 
    return secondRouteOnlyRegex.test(s.name) && !s.abstract; 
}); 
$scope.tabs = navlinks; 

mie definizioni di percorso hanno una proprietà data che contiene il titolo e altri metadati necessari per il rendering delle schede.

mio modello simile a questa (utilizzando bootstrap):

<ul class="nav nav-tabs"> 
    <li ng-repeat="state in tabs" ui-sref-active="active"> 
     <a href="{{state.url}}" ui-sref="{{state.name}}">{{state.data.title}}</a> 
    </li> 
</ul> 

Answer 2

Se si utilizza stateHelper, consente di registrare gli stati come questo (dal stateHelper readme):

angular.module('myApp', [ 'ui.router', 'ui.router.stateHelper' ]) 
    .config(function(stateHelperProvider){ 
     stateHelperProvider 
      .state({ 
       name: 'root', 
       templateUrl: 'root.html', 
       children: [ 
        { 
         name: 'contacts', 
         template: '<ui-view />', 
         children: [ 
          { 
           name: 'list', 
           templateUrl: 'contacts.list.html' 
          } 
         ] 
        }, 
        { 
         name: 'products', 
         templateUrl: 'products.html', 
         children: [ 
          { 
           name: 'list', 
           templateUrl: 'products.list.html' 
          } 
         ] 
        } 
       ] 
      }) 
      .state({ 
       name: 'rootSibling', 
       templateUrl: 'rootSibling.html' 
      }); 
     }); 

Nel controller di navigazione è quindi possibile utilizzare l'attributo children nello stato "root". Per esempio, sto usando questo per visualizzare tutti i bambini dello stato attuale:

angular.module('app') 
    .controller('TransportController', function($scope, $state) { 
     $scope.items = $state.current.children;  
    }); 

Spero che questo aiuti.

Answer 3

ho fatto questo che è più facile e più veloce:

var chillin = $state.get().filter(function(cState) { return cState.name.indexOf('parent.state.') === 0 });