angularjs ui-router: Uzyskaj listę stanów potomnych danego stanu

Question

Czy znasz sposób w ui-routerze, aby uzyskać listę stanów potomnych danego stanu?

Wdrażam kompleksowe SPA z 4-poziomową głęboką nawigacją za pomocą interfejsu użytkownika.

Chciałbym zaimplementować interfejs zakładki nawigacji dla drugiego poziomu generowanego automatycznie z tabeli routera.

W tym celu muszę uzyskać listę bezpośrednich dzieci danego stanu (może to stan abstrakcyjny). Jedynym sposobem, w jaki znalazłem stan, jest wykonanie $state.get() i uzyskanie pełnej listy stanów, ale to oznacza, że ​​będę musiał sam przeanalizować stany potomne i myślę, że to kod już napisany w ui -router.

Odpuszczam to pytanie na wypadek, gdyby ktoś miał doświadczenie w kodzie źródłowym lub znał wtyczkę lub moduł, który może mi w tym pomóc. W międzyczasie zrobię badania na własną rękę i opublikuję wyniki, jeśli coś znajdę.

Answer 1

W końcu musiałem wdrożyć tę funkcję samodzielnie.

W regulatorze abstrakcyjnej, że trasa ma interfejs kartę, sączy stany za pomocą wyrażenia regularnego korzystając z domyślnej konwencji nazewnictwa dla tras:

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; 

moich definicji trasy mają właściwość data który zawiera tytuł i inne metadane potrzebne do renderowania kart.

Mój szablon wygląda mniej więcej tak (z użyciem 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

Jeśli używasz stateHelper, umożliwia zarejestrowanie stanów tak (z 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' 
      }); 
     }); 

W kontrolerze nawigacyjnym możesz użyć atrybutu children w stanie "root". Na przykład używam tego do wyświetlania wszystkich dzieci w bieżącym stanie:

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

Mam nadzieję, że to pomoże.

Answer 3

Zrobiłem to co jest łatwiejsze i szybsze:

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