使用ui-router和AngularJS实现页面间参数传递

你遇到的核心问题在于：当用window.open打开新窗口时，$state.href生成的URL会把参数序列化为字符串，直接传对象的话会变成[object Object]，完全丢失数据。因为新窗口是独立的应用实例，内存中的参数无法直接共享，必须通过URL传递序列化后的字符串或者本地存储来实现。下面给你两种可行的解决方案：

方案一：JSON序列化对象（适合小对象） #

把对象转为JSON字符串，编码后通过URL传递，目标控制器再解析还原：

1. ControllerA中修改参数传递逻辑 #

// 假设你的对象是这样的
const objectA = { id: 123, title: "示例对象", content: "这是要传递的内容" };

// 序列化为JSON并编码，避免URL特殊字符问题
const serializedObject = encodeURIComponent(JSON.stringify(objectA));
// 传递序列化后的字符串
const url = $state.href('home.stateA', { objectA: serializedObject });
window.open(url, '_blank');

2. 路由配置保持不变 #

.state('home.stateA', {
  url: '/stateA',
  template: '<template-b></template-b>',
  params: {
    objectA: null
  }
})

3. ControllerB中解析对象 #

app.controller('ControllerB', function($stateParams) {
  // 解码并解析JSON字符串还原对象
  const receivedObject = JSON.parse(decodeURIComponent($stateParams.objectA));
  
  // 绑定到作用域，方便视图显示
  this.displayObject = receivedObject;
  console.log("接收到的对象：", receivedObject);
});

方案二：本地存储传递（适合大对象） #

如果对象体积较大（超过URL长度限制，一般浏览器URL上限在2000-8000字符），可以用localStorage或sessionStorage暂存对象，传递唯一标识key：

1. ControllerA中存储对象并传递key #

const objectA = { /* 大体积对象内容 */ };
// 生成唯一key，避免冲突
const tempKey = `temp_transfer_object_${Date.now()}_${Math.random()}`;
// 存储序列化后的对象
localStorage.setItem(tempKey, JSON.stringify(objectA));
// 传递key作为参数
const url = $state.href('home.stateA', { objectKey: tempKey });
window.open(url, '_blank');

2. 修改路由配置参数 #

.state('home.stateA', {
  url: '/stateA',
  template: '<template-b></template-b>',
  params: {
    objectKey: null
  }
})

3. ControllerB中获取对象并清理存储 #

app.controller('ControllerB', function($stateParams) {
  const tempKey = $stateParams.objectKey;
  // 从本地存储取出对象
  const receivedObject = JSON.parse(localStorage.getItem(tempKey));
  
  // 绑定到视图显示
  this.displayObject = receivedObject;
  
  // 重要：用完立即删除，避免本地存储残留数据
  localStorage.removeItem(tempKey);
});

额外注意事项 #

• 如果对象存在循环引用，JSON.stringify会报错，此时可以用AngularJS内置的angular.toJson()方法，它会自动处理循环引用：angular.toJson(objectA)
• 本地存储只能存储字符串，所以必须序列化/反序列化
• 新窗口是独立的AngularJS实例，不要尝试用内存变量传递数据，必然会失败

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