我创建了一个example http://plnkr.co/edit/r2JhV4PcYpKJdBCwHIWS?p=preview展示如何做。更新state
定义是:
$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;
})
我们可以看到,state 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
.
链接到文档:
- 网址参数 https://github.com/angular-ui/ui-router/wiki/URL-Routing#url-parameters
你可以检查一下here http://plnkr.co/edit/r2JhV4PcYpKJdBCwHIWS?p=preview
params : {}
还有new,更细粒度的设置params : {}
。正如我们已经看到的,我们可以将参数声明为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 http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.%24stateProvider
以下只是摘录
-
值 - {对象|函数=}:指定该参数的默认值。这隐式将此参数设置为可选...
-
数组 - {布尔=}:(默认值: false)如果为 true,则参数值将被视为值数组。
-
壁球 - {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]})">
检查实际情况here http://plnkr.co/edit/r2JhV4PcYpKJdBCwHIWS?p=preview