我已经创建了一个例子来展示如何。更新后的状态定义如下:
$stateProvider
.state('home', {
url: '/:foo?bar',
views: {
'': {
templateUrl: 'tpl.home.html',
controller: 'MainRootCtrl'
},
...
}
这是控制器:
.controller('MainRootCtrl', function($scope, $state, $stateParams) {
//..
var foo = $stateParams.foo; //getting fooVal
var bar = $stateParams.bar; //getting barVal
//..
$scope.state = $state.current
$scope.params = $stateParams;
})
我们可以看到,现在home的url被定义为:
url: '/:foo?bar',
这意味着,url中的参数被期望为
/fooVal?bar=barValue
这两个链接将正确地将参数传递给控制器:
<a ui-sref="home({foo: 'fooVal1', bar: 'barVal1'})">
<a ui-sref="home({foo: 'fooVal2', bar: 'barVal2'})">
同样,控制器使用$stateParams而不是$stateParam。
链接到文档:
URL参数
你可以在这里查看
参数:{}
还有新的、更细粒度的设置参数:{}。正如我们已经看到的,我们可以将参数声明为url的一部分。但是使用params:{}配置,我们可以扩展这个定义,甚至引入不属于url的参数:
.state('other', {
url: '/other/:foo?bar',
params: {
// here we define default value for foo
// we also set squash to false, to force injecting
// even the default value into url
foo: {
value: 'defaultValue',
squash: false,
},
// this parameter is now array
// we can pass more items, and expect them as []
bar : {
array : true,
},
// this param is not part of url
// it could be passed with $state.go or ui-sref
hiddenParam: 'YES',
},
...
参数的可用设置在$stateProvider的文档中描述
以下只是摘录
取值—{object|function=}:该参数的默认值。这隐式地将该参数设置为可选…
array - {boolean=}:(默认值:false)如果为true,参数值将被视为一个值数组。
squash - {bool|string=}: squash配置当当前参数值与默认值相同时,默认参数值如何在URL中表示。
我们可以这样调用这些参数:
// hidden param cannot be passed via url
<a href="#/other/fooVal?bar=1&bar=2">
// default foo is skipped
<a ui-sref="other({bar: [4,5]})">
在这里检查它的行动