在 AngularJS 中，ui-router 是一个非常流行的路由库，它可以帮助我们实现单页应用程序的路由功能。在实际开发中，经常需要在不同的页面之间传递参数，ui-router 提供了多种方式来实现参数传递，本文将详细介绍这些方法。
URL 参数传递
ui-router 允许我们通过 URL 来传递参数，这是最常用的一种方式。我们可以在状态定义时，通过 url 属性来指定 URL，并在 URL 中通过 : 来定义参数。例如：
$stateProvider.state('user', {
url: '/user/:id',
templateUrl: 'user.html',
controller: 'UserController'
});在上面的代码中，我们定义了一个名为 user 的状态，它的 URL 为 /user/:id，其中 :id 表示参数。当用户访问 /user/123 时，ui-router 会自动将参数 123 传递给该状态的控制器 UserController。
我们可以在控制器中通过 $stateParams 服务来获取参数。例如：
app.controller('UserController', ['$scope', '$stateParams', function($scope, $stateParams) {
$scope.userId = $stateParams.id;
}]);在上面的代码中，我们通过 $stateParams.id 来获取 URL 中传递的参数，并将其赋值给 $scope.userId 变量。这样，我们就可以在页面中使用 {{userId}} 来显示用户的 ID 了。
需要注意的是，如果参数是可选的，我们可以在参数名后面加上 ?，例如：
$stateProvider.state('user', {
url: '/user/:id?',
templateUrl: 'user.html',
controller: 'UserController'
});在上面的代码中，参数 id 是可选的，即用户可以访问 /user，也可以访问 /user/123。
状态间传递参数
除了 URL 参数传递外，ui-router 还提供了其他方式来实现状态间的参数传递。下面介绍几种常用的方式。
$state.go 方法传递参数
我们可以通过 $state.go 方法来跳转到另一个状态，并在跳转时传递参数。例如：
$state.go('user', {id: 123});在上面的代码中，我们通过 $state.go 方法跳转到名为 user 的状态，并传递了参数 {id: 123}。在目标状态的控制器中，我们可以通过 $stateParams 服务来获取参数。例如：
app.controller('UserController', ['$scope', '$stateParams', function($scope, $stateParams) {
$scope.userId = $stateParams.id;
}]);在上面的代码中，我们通过 $stateParams.id 来获取跳转时传递的参数，并将其赋值给 $scope.userId 变量。
$state.current 对象传递参数
我们可以通过 $state.current 对象来获取当前状态的参数，例如：
app.controller('UserController', ['$scope', '$state', function($scope, $state) {
$scope.userId = $state.current.params.id;
}]);在上面的代码中，我们通过 $state.current.params.id 来获取当前状态的参数，并将其赋值给 $scope.userId 变量。
$rootScope 对象传递参数
我们可以通过 $rootScope 对象来在不同的控制器之间传递参数，例如：
app.controller('UserController', ['$scope', '$rootScope', function($scope, $rootScope) {
$rootScope.userId = 123;
}]);
app.controller('OrderController', ['$scope', '$rootScope', function($scope, $rootScope) {
$scope.orderId = $rootScope.userId + '-001';
}]);在上面的代码中，我们在 UserController 控制器中将参数 123 赋值给 $rootScope.userId 变量，在 OrderController 控制器中可以通过 $rootScope.userId 来获取该参数，并将其加上后缀 -001 赋值给 $scope.orderId 变量。
需要注意的是，使用 $rootScope 对象来传递参数并不是最佳的做法，因为它会导致全局变量过多，可能会引发命名冲突等问题。因此，建议在实际开发中尽量避免使用该方式。
总结
本文介绍了 ui-router 中常用的参数传递方式，包括 URL 参数传递、$state.go 方法传递参数、$state.current 对象传递参数和 $rootScope 对象传递参数。在实际开发中，我们应该根据具体情况选择合适的方式来实现参数传递，并注意避免全局变量过多等问题。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658ec9abeb4cecbf2d49b6d2