Подстроки AngularJS ui-router

Question

Я новичок в ui-router, и я пытаюсь добавить класс к своим навигационным элементам, если это активная страница.

Вот мой stateProvider:

$stateProvider 
    .state('home', { 
     url: '/home', 
     templateUrl: 'templates/home.html', 
    }) 
    .state('matches', { 
     url: '/matches', 
     templateUrl: 'templates/matches.html', 
    }) 
    .state('matches.add', { 
     url: '/add', 
     templateUrl: 'templates/add-match.html', 
    }) 
    .state('statistics', { 
     url: '/statistics', 
     templateUrl: 'templates/statistics.html', 
    }); 

Что следует перевести в следующую структуру:

/home 
/matches 
    /add 
/statistics 

Я генерирующего свою навигацию с помощью контроллера:

app.controller('mainNavController', ['$scope', function($scope) { 
    $scope.items = [ 
     { 
      title: 'Home', 
      sref: 'home', 
      href: './home', 
     }, 
     { 
      title: 'Matches', 
      sref: 'matches', 
      href: './matches', 
     }, 
     { 
      title: 'Statistieken', 
      sref: 'statistics', 
      href: './statistics', 
     }, 
    ]; 
}]); 

, который генерирует ul.main-nav следующим образом:

<ul class="main-nav" ng-controller="mainNavController"> 
    <li ng-repeat="item in items" ui-sref-active="is-active"><a href="{{item.href}}" ui-sref="{{item.sref}}">{{item.title}}</a></li> 
</ul> 

нормальных элементов (корневой уровня) получить правильный активный класс, но при переходе к /matches/add он не добавляет активный класс к Matches элементу в моей навигации.

Как бы я это сделал? Я проверил this commit, но я не вижу, как я мог бы реализовать это в своем проекте.

Answer 1

Ваш код будет работать, если вы разместите ui-sref для элементов второго уровня в рамках пунктов первого уровня

Cite от официального angular-ui-router docs:

ui-sref-active могут жить в том же элементе, как ui-sref или на родительском элемента. Будут использоваться первые ui-sref-active, найденные на том же уровне или выше ui-sref.

Answer 2

Похоже, если вы обновите UI-маршрутизатор до последней версии это позаботилась о