AngularJS状态传递多参数失效求助：单参数正常多参数报错

嘿，这个问题我之前也碰到过，咱们一步步来排查解决：

1. 先确认filter变量是否真的存在于当前作用域 #

报错filter is not defined最直接的原因就是你在params: {name: name, filter: filter}里用到的filter变量，在当前代码的作用域里根本没定义，或者拼写错误了。

比如你可能在控制器里写跳转代码时，漏了声明filter变量：

// 错误示例：filter变量未定义
$state.go('targetState', {name: $scope.name, filter: filter}); // 这里filter没声明，直接报错

正确的写法要先确保filter有值：

// 正确示例：先在作用域中定义filter
$scope.filter = "status:active"; // 或者从表单/其他逻辑中获取这个值
$state.go('targetState', {name: $scope.name, filter: $scope.filter});

2. 检查你的state配置是否正确声明了多个参数 #

在定义state的时候，要确保params里的每个参数都被正确配置，尤其是参数可选时，最好设置默认值避免报错：

$stateProvider.state('targetState', {
  url: '/target/:name?filter', // 可选：把参数放在URL里，也可以不放在URL中
  templateUrl: 'target-page.html',
  controller: 'TargetController',
  params: {
    name: { value: null }, // 设置默认值，避免未传递时出错
    filter: { value: null } // 必须在params里声明这个参数
  }
});

如果不想让参数出现在URL里，直接去掉url中对应的部分，只保留params配置即可。

3. 在目标控制器里正确获取参数 #

确保在目标控制器里用$stateParams（UI-Router 0.x）或者$transition$（UI-Router 1.x+）来接收参数：

// 目标控制器的写法
app.controller('TargetController', function($stateParams) {
  console.log('获取到的name:', $stateParams.name);
  console.log('获取到的filter:', $stateParams.filter);
});

4. 检查跳转时的参数传递是否完整 #

如果是用ui-sref指令跳转，也要确保传递了所有参数：

<!-- 正确的ui-sref写法 -->
<a ui-sref="targetState({name: name, filter: filter})">跳转到目标页</a>

这里同样要保证name和filter都是当前页面作用域中存在的变量。

额外调试技巧 #

如果还是找不到问题，可以在跳转前先打印变量，确认它们的存在：

console.log('准备传递的name:', name);
console.log('准备传递的filter:', filter);
$state.go('targetState', {name: name, filter: filter});

这样能快速定位到底是哪个变量出了问题。

内容的提问来源于stack exchange，提问作者Belhanda