在控制器angularjs之間傳遞id值

Question

我正在嘗試將一個控制器的ID傳遞給另一個控制器。 我有一個選擇菜單，通過選擇菜單，您可以導航到相應的錦標賽。 我想在其他控制器中檢索race._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 。 請注意，我如何添加一個對象，其屬性為raceId，該屬性等於所選的比賽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值。 因此，如果您執行$state.go('dashboard.tournament', {id: 7});這將顯示類似/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 $state.go('dashboard.tournament', {tournamentId: 7}); ，但是現在不會將任何內容添加到URI。

在方法1和方法2中，都可以通過$stateParams.tournamentId訪問第二個控制器中的$stateParams.tournamentId 。

您應該使用哪種方法？

唯一的區別確實是方法2將對URI隱藏參數值。 這在抽象狀態下尤其有用，例如，根本不應該有URI可見的狀態。 否則，它們基本上是相同的-只是微小的差異，以及實現同一事物的不同方式。

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

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

有關更多信息，請參考路由文檔 。

Answer 2

實現此目的的一種方法是將錦標賽ID作為狀態參數傳遞給儀表板控制器，因此，當您從菜單中選擇錦標賽時，將被重定向到該特定錦標賽的儀表板。

將參數添加到$ stateProvider上的狀態URL：

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

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

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

並使用$ stateParams在DashboardController上訪問它（不要忘記將$ stateParams注入到控制器中）：

var tournamentId = $stateParams.tournamentId;