Angularjs ui-router: Получить список дочерних состояний данного состояния

Знаете ли вы, что в ui-router вы можете получить список дочерних состояний данного состояния?

Я внедряю комплексный SPA с возможностью 4-х уровневой навигации с использованием ui-router.

Я хотел бы реализовать интерфейс вкладки навигации для второго уровня, созданного автоматически из таблицы маршрутизатора.

Для этого мне нужно получить список прямых детей данного состояния (возможно, это абстрактное состояние). Единственный способ, которым я нашел, чтобы получить состояния, - это сделать $state.get() и получить полный список состояний, но это означает, что мне придется самостоятельно анализировать дочерние состояния, и я думаю, что этот код уже написан в ui-router.

Я задаю этот вопрос здесь, если есть кто-нибудь с опытом в исходном коде или знает плагин или модуль, которые могут мне помочь в этом. Тем временем я сделаю исследование самостоятельно и опубликую результаты, если найду что-то.

Ответ 1

В конце концов, мне пришлось реализовать свою функциональность.

В контроллере абстрактного маршрута, который имеет интерфейс табуляции, отфильтровывает состояния, используя регулярное выражение, используя соглашение об именах по умолчанию для маршрутов:

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;

У моих определений маршрутов есть свойство data, которое содержит заголовок и другие метаданные, необходимые для отображения вкладок.

Мой шаблон выглядит примерно так (используя загрузку):

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

Ответ 2

Я делал это проще и быстрее:

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

Ответ 3

Если вы используете 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'
            });
      });

В вашем навигационном контроллере вы можете использовать атрибут children в "корневом" состоянии. Например, я использую это для отображения всех дочерних элементов текущего состояния:

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

Надеюсь, что это поможет.