AngularJS ui 路由器在不带 URL 的状态间传递数据

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

比如说。 我有两个州 A 和 B。 我在状态“ A”中执行一些服务器调用并传递调用的响应 “ B”字。服务器调用的响应是一个字符串消息，它很长，所以我不能在 url 中公开它。

那么，有没有任何方法在有角的 ui 路由器之间传递数据的状态，而不使用网址参数？

140756 次浏览
小开
最佳答案

我们可以使用 params，新的功能的用户界面路由器:

API Reference/ui.router.state/$stateProvider

params一个映射，它可以选择配置在 url 中声明的参数，也可以定义其他非 url 参数。对于正在配置的每个参数，添加一个键控到参数名称的配置对象。

请看“ 或者定义额外的非 url 参数。”

因此，国防部会说:

$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: "~"
} }

工作示例: 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>

检查示例 给你

小开

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


提交答案