Angular UI路由器在没有URL的状态之间传递数据

我正面临着在两个状态之间传递数据而不暴露url中的数据的问题，就像用户不能真正直接登陆这个状态一样。

例如。 我有两个状态“A”和“B”。 我在状态“A”做一些服务器调用，并将调用的响应传递到状态“B”。 服务器调用的响应是一个字符串消息，这是相当长的，所以我不能在网址中公开。

那么有没有办法在角度ui路由器之间传递数据，而不使用url参数？

Answer 1

我们可以使用params ，UI-Router的新功能：

API参考/ ui.router.state / $ stateProvider

params可选择配置url中声明的params的映射，或者定义附加的非url参数。 对于正在配置的每个参数，添加一个配置对象，以键入参数的名称。

看到部分：“ …或定义其他非网址参数… ”

所以状态def将是：

 $stateProvider .state('home', { url: "/home", templateUrl: 'tpl.html', params: { hiddenOne: null, } }) 

上面提到的文档很少有例子：

 // define a parameter's default value params: { param1: { value: "defaultValue" } } // shorthand default values params: { param1: "defaultValue", param2: "param2Default" } // param will be array [] params: { param1: { array: true } } // handling the default value in url: params: { param1: { value: "defaultId", squash: true } } // squash "defaultValue" to "~" params: { param1: { value: "defaultValue", squash: "~" } } 

EXTEND – 工作示例： http : //plnkr.co/edit/inFhDmP42AQyeUBmyIVl?p=info

这是一个状态定义的例子：

  $stateProvider .state('home', { url: "/home", params : { veryLongParamHome: null, }, ... }) .state('parent', { url: "/parent", params : { veryLongParamParent: null, }, ... }) .state('parent.child', { url: "/child", params : { veryLongParamChild: null, }, ... }) 

这可能是使用ui-sref调用的：

 <a ui-sref="home({veryLongParamHome:'Home--f8d218ae-d998-4aa4-94ee-f27144a21238' })">home</a> <a ui-sref="parent({ veryLongParamParent:'Parent--2852f22c-dc85-41af-9064-d365bc4fc822' })">parent</a> <a ui-sref="parent.child({ veryLongParamParent:'Parent--0b2a585f-fcef-4462-b656-544e4575fca5', veryLongParamChild:'Child--f8d218ae-d998-4aa4-94ee-f27144a61238' })">parent.child</a> 

检查这里的例子

Answer 2

params对象包含在$ stateParams中，但不会成为url的一部分。

1）在路由配置中：

 $stateProvider.state('edit_user', { url: '/users/:user_id/edit', templateUrl: 'views/editUser.html', controller: 'editUserCtrl', params: { paramOne: { objectProperty: "defaultValueOne" }, //default value paramTwo: "defaultValueTwo" } }); 

2）在控制器中：

 .controller('editUserCtrl', function ($stateParams, $scope) { $scope.paramOne = $stateParams.paramOne; $scope.paramTwo = $stateParams.paramTwo; }); 

3A）从控制器改变状态

 $state.go("edit_user", { user_id: 1, paramOne: { objectProperty: "test_not_default1" }, paramTwo: "from controller" }); 

3B）改变html中的状态

 <div ui-sref="edit_user({ user_id: 3, paramOne: { objectProperty: 'from_html1' }, paramTwo: 'fromhtml2' })"></div> 

示例Plunker