Question

我试图让AngularJS中的一个控制器调用另一个控制器（好吧，实际上是另一个路径），然后传入一个参数。我想弄清楚我是否更好：

将参数作为搜索字符串传递给URL。如果是这样，那么我无法解决如何做到这一点，详情如下
使用服务传递参数。这感觉有点像创建一个全局变量，在我看来有问题。再说一次，如果这是正确的方法，那么我就无法弄清楚它是如何运作的。

为了提供更多细节，我正在构建一个示例应用程序，以便我可以学习如何使用Rails提供的restful API将AngularJS绑定到现有的Rails应用程序上。我正在编写一本教程，以便保持我的思想，并可能帮助其他人做同样的事情。该教程是here，该问题目前在该教程的第6页。该示例应用程序是一个体育联盟 - 它有俱乐部和团队。一个团队住在俱乐部内。

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

对于我尝试过的代码，我尝试编辑我的团队控制器，以便使用$ routeParam来提取值。当我这样做并运行调试器时，$ routeParams.club_id为null（事实上，$ 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组。在路线上传递它似乎更具确定性 - 似乎在某个地方它会在全球状态中徘徊的可能性更小。当然，我无法解决如何获得服务以实际执行此操作的事实也可能是问题的一部分。

在我更进一步完成这项工作之前，我对这些选项中的一个或另一个是否是更好的＆＃34;感兴趣。处理需要的方法。我倾向于第一个（虽然我还没有让它工作），但第二个似乎更像人们所推荐的。

Answer 1

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

ui-router具有与$stateParams类似的概念。将$stateParams注入控制器，您将获得查询字符串参数。

请参阅此处的文档https://github.com/angular-ui/ui-router/wiki/URL-Routing

Answer 2

汇总并提供代码段。

我使用$ stateProvider而不是$ routeProvider。这是用ng-boilerplate，我用它作为基础，但我没有意识到它们是两个完全不同的路由器，$ stateProvider具有不同的功能。这意味着我需要使用$ stateParams而不是$ routeParams
当使用$ 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'
      }
    }
  });
})

现在感谢信息更有意义了。

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

2 个答案: