[AngularJS]控制器 angularjs 之间传递的 id 值

发布时间: 2017/4/16 22:00:56
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我试图将从一个控制器的 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'})
  }






}());

解决方法 1:

由于您使用的 ui 路由器,我想什么会为您做到最好在这里是使用 $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: //...
    });

上述已 :tournamentId 现场等待的 URI 中 stateParams 值设置到国家去。因此这将显示类似 /dashboard/tournament/7 如果你做的 $state.go('dashboard.tournament', {id: 7});

方法 2:

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

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

您将设置 stateParams 相同的方式使用类似于 $state.go('dashboard.tournament', {tournamentId: 7}); ,但是现在什么都不会将添加到的 URI。

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

你应该使用哪种方法?

唯一的区别真的是 2 的方法将隐藏从 URI 的参数值。这是特别有用的抽象的国家,例如,应该有没有 URI 可见在所有的地方。否则为他们基本上是相同的 — — 只是轻微的差异和不同的方式实现同样的事情。

如果你希望你的 URL 看起来像 http://domain.com/dashboard/tournament/7 ,然后使用方法 1。

如果你希望你的 URL 看起来像 http://domain.com/dashboard/tournament ,然后使用方法 2。

请参阅路由文档更多的信息。

赞助商