1

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

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

为了提供更多细节，我正在构建一个示例应用程序，这样我就可以学习如何使用 Rails 提供的 Restful API 将 AngularJS 固定到现有的 Rails 应用程序上。我正在写一篇关于这方面的教程，以便保持我的想法，并有可能帮助其他人做同样的事情。该教程在这里，问题目前在该教程的第 6 页。示例应用程序是一个体育联盟 - 它有俱乐部和球队。一个团队生活在一个俱乐部中。

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

对于我尝试过的代码，我尝试编辑我的团队控制器，以便它使用 $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。在路线上传递它似乎更具确定性 - 它似乎不太可能在某个地方的全局状态下徘徊。当然，我不知道如何让服务真正做到这一点也可能是问题的一部分。

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

4

2 回答 2

4

您正在使用$stateProvider ，它是ui-router替代的一部分，$routeProvider.这意味着您不会获得 routeParams，因为它们是使用$routeProvider.

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

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

于 2013-09-03T11:58:45.583 回答
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'
      }
    }
  });
})

现在更有意义了，谢谢你的信息。

于 2013-09-03T20:41:11.080 回答