如何在 UI 路由中将参数传递到控制器？

2024-03-05 06:47:55

在 UI 路由中将参数传递到控制器

在开发单页应用程序时，经常需要在状态之间传递参数。UI 路由提供了一种简单的方法来实现此功能，并将其传递给目标状态的控制器。本文将深入探讨使用 ui-sref 在 UI 路由中将参数传递到控制器的方法。

问题概述

通常情况下，我们需要使用 UI 路由的 ui-sref 将两个参数传递到目标状态，并将其传递给控制器。例如：

使用以下链接将 home 状态设置为 foo 和 bar 参数：

<a ui-sref="home({foo: 'fooVal', bar: 'barVal'})">转到带有 foo 和 bar 参数的主页状态</a>

在控制器中接收 foo 和 bar 值：

app.controller('SomeController', function($scope, $stateParam) {
  //..
  var foo = $stateParam.foo; //getting fooVal
  var bar = $stateParam.bar; //getting barVal
  //..
});

但在控制器中，我们得到 $stateParam 为 undefined。

步骤 1：在状态配置中指定参数

要解决这个问题，我们需要遵循以下步骤：

首先，在 ui-router 状态配置中指定要传递的参数。以 home 状态为例：

.state('home', {
  url: '/',
  params: ['foo', 'bar'],
  // ... 其他配置
});

步骤 2：在 `ui-sref` 中传递参数

接下来，在 ui-sref 中使用点语法指定要传递的参数。修改后的链接如下：

<a ui-sref="home({foo: 'fooVal', bar: 'barVal'})">转到带有 foo 和 bar 参数的主页状态</a>

步骤 3：在控制器中注入 `$stateParams`

最后，在控制器中通过注入 $stateParams 服务来访问参数。修改后的控制器代码如下：

app.controller('SomeController', function($scope, $stateParams) {
  var foo = $stateParams.foo; // 访问 fooVal
  var bar = $stateParams.bar; // 访问 barVal
  // ... 控制器逻辑
});

示例代码

为了更好地理解，让我们看一个完整的示例代码：

angular.module('app', ['ui.router'])
  .config(function($stateProvider, $urlRouterProvider) {

    $stateProvider
      .state('home', {
        url: '/',
        params: ['foo', 'bar'],
        views: {
          '': {
            templateUrl: 'home.html',
            controller: 'MainRootCtrl'
          },

          'A@home': {
            templateUrl: 'a.html',
            controller: 'MainCtrl'
          },

          'B@home': {
            templateUrl: 'b.html',
            controller: 'SomeController'
          }
        }
      });
  })

  .controller('SomeController', function($scope, $stateParams) {
    var foo = $stateParams.foo;
    var bar = $stateParams.bar;
    // 控制器逻辑
  });

在上面的示例中，home 状态接受 foo 和 bar 作为参数。当用户单击 <a ui-sref="home({foo: 'fooVal', bar: 'barVal'})"> 链接时，它将 foo 和 bar 值传递到 home 状态，这些值可以通过控制器中的 $stateParams 服务访问。