javascript - 在 Controller 之间传递id值

Question

我正在尝试将 ID 从一个 Controller 传递到另一个 Controller 。我有一个选择菜单，选择后将导航到适当的锦标赛。我想在不同的 Controller 中检索锦标赛._id 值，然后查询该锦标赛的数据。我是 Angular 新手，非常感谢任何帮助。谢谢!

选择菜单

<select class="form-control" ng-model="vm.selectedTournamentId" ng-change="vm.showTournament()" >
  <option value="">Select a tournament</option>
  <option ng-repeat="tournament in vm.tournaments" value="{{ tournament._id }}">{{ tournament.name }}</option>
</select>

app.js

.controller('NavigationController', NavigationController);
NavigationController.$inject = ['TournamentService', '$q', '$location', '$scope', '$filter', '$state'];
function NavigationController(TournamentService, $q, $location, $scope,  $filter, $state) {
  var vm = this;
  vm.tournaments = TournamentService.query();
  vm.showTournament = function() {
    var tournament = TournamentService.query({id: vm.selectedTournamentId}, function() {
    vm.selectedTournament = tournament[0]
    $state.go('dashboard.tournament')
    });
  }
}

仪表板.js

angular.module('Dashboard',[]).controller('DashboardController',
DashboardController).factory('TournamentService', TournamentService).factory('UserService', UserService).factory('TeamService', TeamService)

DashboardController.$inject = ['$scope','TournamentService','TeamService','UserService','$q'];

function DashboardController($scope, TournamentService, TeamService, UserService, $q) {
  var vm = this;
  var tournaments = TournamentService.query();
  var users = UserService.query();
  var teams = TeamService.query()

  $q.all([tournaments, users, teams]).then(function(results) {
    vm.users = users;
    vm.availablePlayers = users;
    vm.tournaments = tournaments;
    vm.teams = teams;
  })
}
TournamentService.$inject = ['$resource'];
  function TournamentService($resource) {
   return $resource('/api/tournaments/:id',{cache: true},{tournament: '@tournament'});
  }
UserService.$inject = ['$resource'];
  function UserService($resource) {
  return $resource('/api/users/:id', {cache: true},{user: '@user'})
}
TeamService.$inject = ['$resource'];
  function TeamService($resource) {
  return $resource('/api/teams/:id',{cache: true}, {team: '@team'})
  }






}());

Answer 1

由于您使用的是 ui-router，我认为您在这里最好的做法是使用 $stateParams。

而不是这个:

  vm.showTournament = function() {
    var tournament = TournamentService.query({id: vm.selectedTournamentId}, function() {
    vm.selectedTournament = tournament[0]
    $state.go('dashboard.tournament')
    });
  }

这样做:

  vm.showTournament = function() {
    var tournament = TournamentService.query({id: vm.selectedTournamentId}, function() {
        vm.selectedTournament = tournament[0];
        $state.go('dashboard.tournament', {tournamentId: vm.selectedTournamentId});
    });
  }

差异在于 $state.go 。请注意我如何添加一个具有锦标赛 ID 属性的对象，该属性等于所选锦标赛 ID。该属性将传递到您进入的下一个状态，即 dashboard.tournament 。

现在在您的第二个 Controller 中，您还需要注入(inject) $stateParams ，然后通过执行 $stateParams.tournamentId 访问该锦标赛属性。因此，您可以将变量设置为 vm.tournament = $stateParams.tournamentId 或类似的值。

<小时/>

但是，为了使这一切正常工作，您需要在您尝试将锦标赛或锦标赛 ID 发送到的状态上设置某种参数。

方法一:

$stateProvider
    .state('dashboard.tournament', {
        url: '/dashboard/tournament/:tournamentId'
        templateUrl: //...,
        controller: //...
    });

上面的 URI 中有一个 :tournamentId 位置，它等待进入该状态时设置 stateParams 值。因此，如果您执行 /dashboard/tournament/7 ，则会显示类似 $state.go('dashboard.tournament', {id: 7}); 的内容。

方法2:

$stateProvider
    .state('dashboard.tournament', {
        url: '/dashboard/tournament'
        templateUrl: //...,
        controller: //...,
        params: {
            tournamentId: null
        }
    });

注意到我们如何从 url 值中删除 :tournamentId。

您可以使用类似 $state.go('dashboard.tournament', {tournamentId: 7}); 的内容以相同的方式设置 stateParams，但现在不会向 URI 添加任何内容。

在方法 1 和方法 2 中，您都可以通过 $stateParams.tournamentId 访问第二个 Controller 中的 racingId 值。

您应该使用哪种方法？

唯一的区别实际上是方法 2 会隐藏 URI 中的参数值。这在抽象状态中尤其有用，例如，根本不应该有 URI 可见的情况。除此之外，它们基本上是相同的——只是细微的差别以及实现相同目标的不同方式。

如果您希望 URL 看起来像 http://domain.com/dashboard/tournament/7 ，请使用方法 1。

如果您希望 URL 看起来像 http://domain.com/dashboard/tournament ，请使用方法 2。

请参阅 routing docs 了解更多信息。