AngularJS：从一条路由调用到另一条路由，并传递参数$ routeParams？

Question

我试图让AngularJS中的一个控制器调用另一个控制器（嗯，实际上是另一个路由），并传递一个参数。 我正在尝试确定我是否更好：

1. 将参数作为搜索字符串传递到URL。 如果是这样，那么我将不知道如何执行此操作，以下详细信息
2. 使用服务传递参数。 感觉有点像创建全局变量，在我看来这有问题。 再说一次，如果这是正确的方法，那我就无法弄清楚它是如何工作的。

为了提供更多细节，我正在构建一个示例应用程序，以便我可以学习如何使用Rails提供的宁静API将AngularJS连接到现有的Rails应用程序上。 我正在撰写有关此内容的教程，以使我的想法保持正确，并有可能帮助其他人做同样的事情。 该教程位于此处 ，问题当前在该教程的第6页上。 该示例应用程序是一个体育联赛-它拥有俱乐部和球队。 一个团队生活在俱乐部中。

我希望能够直接进入团队列表页面，在这种情况下，我将显示所有团队。 我还希望能够从特定俱乐部进入球队列表视图，在这种情况下，我只想显示该俱乐部内的球队。 在角度之外，这对我而言意味着我来到/ teams，其中显示了所有球队，或者我来到了/ teams？club_id = 1，其中显示了club_id = 1的球队。 我不认为这是路径问题-所以我希望/ teams / 1成为第1队，而不是第1俱乐部的队，所以我将其视为搜索参数。

对于我尝试过的代码，我试图编辑我的team控制器，以便它使用$ routeParam提取值。 当我这样做并运行调试器时，$ routeParams.club_id为空（实际上，$ routeParams总体为空）：

.controller( 'TeamCtrl', function TeamController( $scope, titleService, TeamRes, TeamInput, $dialog, $routeParams ) {
  titleService.setTitle( 'Team' );

  $scope.club_id = $routeParams.club_id;

我可以看到评论说我需要HTML模板中的ng-view才能起作用，而我对路由的定义当前在控制器中如下所示：

.config(function config( $stateProvider ) {
  $stateProvider.state( 'team', {
    url: '/team',
    views: {
      "main": {
        controller: 'TeamCtrl',
        templateUrl: 'team/team.tpl.html'
      }
    }
  });
})

此页面的html非常简单，因为它基本上由一个网格和几个按钮组成：

<div>
  <h1>Team functions</h1>
</div>

<div class="body">
  <strong>Filter:</strong><input type="text" ng-model="filterOptions.filterText" />
  <div class="gridStyle" ng-grid="gridOptions"></div>
  <button ng-click="newTeam()" class="btn btn-primary" >New Team</button>
</div>

我看到的另一个建议是使用服务/工厂。 似乎可以在我的团队控制器中定义一个服务，然后让我的俱乐部控制器在调用团队路线之前将数据传递到该服务中。 对我来说，这有点像声明一个全局变量-感觉很脆弱，如果该变量没有由于某些代码缺陷或其他意外问题而无法重置，那么下次我进入页面时，它仍将具有该club_id的设置。 在路线上通过它似乎更具确定性-似乎不太可能在全球某个地方徘徊。 当然，我无法解决如何实际获得服务的事实也可能是问题的一部分。

在进一步解决这个问题之前，我对这些选项中的一个或另一个是否是处理需求的“更好”方式感兴趣。 我倾向于第一个（尽管我还没有使其工作），但是第二个似乎更多地是人们推荐的。

Answer 1

您正在使用$stateProvide r，它是ui-router的一部分，是$routeProvider.的替代$routeProvider. 这意味着您将不会获得routeParam，因为它们是使用$routeProvider进行管理的。

ui-router具有类似$stateParams概念。 将$stateParams注入您的控制器，您将获得querystring参数。

在此处查看文档https://github.com/angular-ui/ui-router/wiki/URL-Routing

Answer 2

总结并提供代码段。

1. 我使用的是$ stateProvider而不是$ routeProvider。 这与ng-boilerplate一起使用，我以此为基础，但是我没有意识到它们是两个完全不同的路由器，而$ stateProvider具有不同的功能。 这意味着我需要使用$ stateParams而不是$ routeParams
2. 使用$ stateProvider时，您无法在URL上检索任意搜索参数，需要指定视图能够响应的参数才能访问它们

然后，这给了我这两个代码片段以满足我的需求，首先是在javascript中：

.controller( 'TeamCtrl', function TeamController( $scope, titleService, TeamRes, $dialog, $stateParams ) {
  titleService.setTitle( 'Team' );
  $scope.teams = TeamRes.query();

  console.log($stateParams);
  $scope.club_id = $stateParams.club_id;

并在状态提供者中：

.config(function config( $stateProvider ) {
  $stateProvider.state( 'team', {
    url: '/team?club_id',
    views: {
      "main": {
        controller: 'TeamCtrl',
        templateUrl: 'team/team.tpl.html'
      }
    }
  });
})

现在，有了更多信息，它变得更加有意义。