angularjs - 如何访问 View 外的路由参数

Question

我正在编写一个非常简单的 Angular 应用程序来显示有关足球比赛的信息。对于数据库中的每场比赛，我想显示比赛或统计数据的 View ，所以我正在实现这个简单的 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 中的链接。我希望这些链接可以将 View 更改为当前锦标赛的统计数据或比赛列表。但是由于链接在 View 之外，所以它们无法访问路由参数(我尝试注入(inject) $routeParams，我得到的只是一个空对象)。

总之，我无法创建链接以更改其外部的 View 。导航栏不知道当前的锦标赛是什么。

我如何(以及最好的方法是)在 View 之外访问 View 的当前状态(在本例中为当前锦标赛)？

Answer 1

之后reading a bit about scopes我学会了它们是如何嵌套的。我通过使用新 Controller 包装 View 和导航栏解决了我的问题:

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

该 View 将继承 NavController 的原型(prototype)范围。我在外部范围内初始化了一个对象，并将所需的值分配给内部 Controller 中的一个属性:

 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;
 });