Question

我正在编写一个非常简单的Angular应用程序，用于显示有关足球锦标赛的信息。对于数据库中的每个锦标赛，我想显示匹配或统计信息的视图，所以我正在实现这个简单的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'  })
}]);

我的问题是HTML中的{{ t }}个链接。我想要链接将视图更改为当前锦标赛的统计数据或匹配列表。但由于链接在视图之外，所以他们无法访问路由参数（我尝试注入$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服务从应用中的任何位置访问状态和状态变量。

如何访问视图外的路由参数

2 个答案: