Как получить доступ к параметрам маршрута за пределами вида

Question

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

• foo/matches: матчи турнира Foo,
• foo/stats: пользователь турнир Foo.

Файл index.html структурирована следующим образом:

<nav ng-controller="NavController"> 
    <ul> 
    <li> <a href="#/{{ t }}/matches"> Matches </a> 
    <li> <a href="#/{{ t }}/status"> Stats </a> 
    </ul> 
</nav> 

<div ng-view></div> 

и маршруты настроены так:

app.config(['$routeProvider', function ($routeProvider) { 
    $routeProvider 
    .when('/:t/matches', {templateUrl: 'partials/matches.html', controller: 'MatchesController'}) 
    .when('/:t/stats', {templateUrl: 'partials/stats.html', controller: 'StatsController' }) 
}]); 

Моя проблема те {{ t }} ссылки в HTML. Я хочу, чтобы ссылки меняли представление на статистику или список совпадений для текущего турнира. Но поскольку ссылки находятся за пределами представления, поэтому они не имеют доступа к параметрам маршрута (я попытался ввести $routeParams, и все, что я получаю, это пустой объект).

Таким образом, я не смог создать ссылки для изменения внешнего вида. Навигационная панель не знает, что представляет собой текущий турнир.

Как я могу (и как лучше всего) получить доступ к текущему состоянию представления (в данном случае, к текущему турниру) за его пределами?

Answer 1

reading a bit about scopes Я узнал, как они гнездятся. Я решить мою проблему, просто обернув как вид и панель навигации с новым контроллером:

<div ng-controller="NavController"> 

    <nav> 
    <ul> 
     <li> <a href="#/{{ t }}/matches"> Matches </a> 
     <li> <a href="#/{{ t }}/status"> Stats </a> 
    </ul> 
    </nav> 

    <div ng-view></div> 

</div> 

мнение унаследует сферу NavController в образцово. Я инициализировал объект во внешней области и присвоил желаемое значение одному из своих свойств во внутренних контроллерах:

app.controller('NavController', function ($scope) { 
    $scope.currentTournament = {}; 
}); 

app.controller('MatchesController', function ($scope, $routeParams) { 
    // ... 
    $scope.currentTournament.id = $routeParams.t; 
}); 

app.controller('StatsController', function ($scope, $routeParams) { 
    // ... 
    $scope.currentTournament.id = $routeParams.t; 
}); 

Answer 2

Если вы используете ui-router, вы можете использовать службу $ stateParams для доступа к переменным состояния и состояния из любого места в вашем приложении.