Question

我试图将id从一个控制器传递到另一个控制器。我有一个选择菜单，选择后将导航到相应的锦标赛。我想在不同的控制器中检索tournament._id值，然后查询该锦标赛的数据。我是棱角分明的新人，感谢任何帮助。谢谢！

选择菜单

<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')
    });
  }
}

dashboard.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。注意我是如何添加一个具有tournamentId属性的对象，它等于所选的锦标赛ID。此属性将传递到您前往的下一个州，即dashboard.tournament。

现在在你的第二个控制器中，你还需要注入$stateParams，然后通过$stateParams.tournamentId访问该锦标赛属性。因此，您可以将变量设置为vm.tournament = $stateParams.tournamentId。

然而，为了使这一切都有效，您需要在尝试将锦标赛或锦标赛ID发送到的状态上设置某种参数。

方法1：

$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
        }
    });

注意我们如何从网址值中删除:tournamentId。

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

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

您应该使用哪种方法？

唯一的区别是方法2将隐藏URI中的param值。这在抽象状态中特别有用，例如，根本不应该有可见的URI。否则，它们基本上是相同的 - 只是微小的差异和实现同样事物的不同方式。

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

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

有关详细信息，请参阅routing docs。

Answer 2

实现此目标的一种方法是将锦标赛ID作为状态参数传递给仪表板控制器，因此以这种方式从菜单中选择锦标赛时，您将被重定向到该特定锦标赛的仪表板。

将参数添加到$ stateProvider上的州网址

.state('app.dashboard', {
     url: '/dashboard/:tournamentId',

在您的app.js（菜单控制器）上：

$state.go('dashboard.tournament',{'tournamentId': vm.selectedTournamentId});

并使用$ stateParams在DashboardController上访问它（不要忘记向控制器注入$ stateParams）：

var tournamentId = $stateParams.tournamentId;

在控制器angularjs之间传递id值

选择菜单

app.js

dashboard.js

2 个答案: