我需要将两个参数传递并接收到要转换为使用ui-srefui-router的状态。
ui-sref
例如使用下面的链接将状态转换为homewith foo和bar参数:
home
foo
bar
<a ui-sref="home({foo: 'fooVal', bar: 'barVal'})">Go to home state with foo and bar parameters </a>
控制器中的接收foo和bar值:
app.controller('SomeController', function($scope, $stateParam) { //.. var foo = $stateParam.foo; //getting fooVal var bar = $stateParam.bar; //getting barVal //.. });
我得到undefined了$stateParam在控制器中。
undefined
$stateParam
有人可以帮助我了解如何完成它吗?
编辑:
.state('home', { url: '/', views: { '': { templateUrl: 'home.html', controller: 'MainRootCtrl' }, 'A@home': { templateUrl: 'a.html', controller: 'MainCtrl' }, 'B@home': { templateUrl: 'b.html', controller: 'SomeController' } } });
我创建了一个示例来说明如何操作。更新的state定义将是:
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; })
我们可以看到,状态状态现在的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。
$stateParams
params : {}
还有 新的 更细粒度的设置 params : {} 。正如我们已经看到的,我们可以将参数声明为的一部分 url 。但是通过params : {}配置-我们可以扩展此定义,甚至引入不属于url的参数:
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的文档中描述了可用于参数的设置
以下只是摘录
我们可以这样称呼这些参数:
// 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]})">