How to access route parameters outside the view
I'm writing a very simple Angular app for showing information about
football tournaments. For each tournament in the database I want to show a
view of either the matches or the statistics, so I'm implementing this
simple URL scheme:
foo/matches: matches of tournament Foo,
foo/stats: statistics for tournament Foo.
The index.html file is structured like this:
<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>
and the routes are configured like this:
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/:t/matches', {templateUrl: 'partials/matches.html',
controller: 'MatchesController'})
.when('/:t/stats', {templateUrl: 'partials/stats.html',
controller: 'StatsController' })
}]);
My problem are those {{ t }} links in the HTML. I want the links to change
the view to the stats or the match list for the current tournament. But
since the links are outside the view, so they don't have access to the
route parameters (I tried injecting $routeParams and all I get is an empty
object).
In summary, I haven't been able to create links for changing the view
outside of it. The nav bar doesn't know what is the current tournament.
How can I (and what is the best way to) access the current state of the
view (in this case, the current tournament) outside of it?
No comments:
Post a Comment