Javascript 如何使用ui路由器中的ui sref将参数传递给控制器
我需要使用ui路由器的Javascript 如何使用ui路由器中的ui sref将参数传递给控制器,javascript,html,angularjs,angular-ui-router,angular-ui,Javascript,Html,Angularjs,Angular Ui Router,Angular Ui,我需要使用ui路由器的ui sref将两个参数传递并接收到我想要转换到的状态 类似于使用下面的链接将状态转换为带有foo和bar参数的home: <a ui-sref="home({foo: 'fooVal', bar: 'barVal'})">Go to home state with foo and bar parameters </a> 我在控制器中为$stateParam获取未定义的 有人能帮我弄明白怎么做吗 编辑: .state('home', { url
ui sref
将两个参数传递并接收到我想要转换到的状态
类似于使用下面的链接将状态转换为带有foo
和bar
参数的home
:
<a ui-sref="home({foo: 'fooVal', bar: 'barVal'})">Go to home state with foo and bar parameters </a>
我在控制器中为$stateParam
获取未定义的
有人能帮我弄明白怎么做吗
编辑:
.state('home', {
url: '/',
views: {
'': {
templateUrl: 'home.html',
controller: 'MainRootCtrl'
},
'A@home': {
templateUrl: 'a.html',
controller: 'MainCtrl'
},
'B@home': {
templateUrl: 'b.html',
controller: 'SomeController'
}
}
});
我创建了一个示例来演示如何使用。更新的状态
定义为:
$stateProvider
.state('home', {
url: '/:foo?bar',
views: {
'': {
templateUrl: 'tpl.home.html',
controller: 'MainRootCtrl'
},
...
}
这就是控制器:
app.controller('SomeController', function($scope, $stateParam) {
//..
var foo = $stateParam.foo; //getting fooVal
var bar = $stateParam.bar; //getting barVal
//..
});
.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;
})
<a ui-sref="home({foo: 'fooVal1', bar: 'barVal1'})">
<a ui-sref="home({foo: 'fooVal2', bar: 'barVal2'})">
我们可以看到,州政府总部现在有url定义为:
url: '/:foo?bar',
这意味着url中的参数应为
/fooVal?bar=barValue
这两个链接将正确地将参数传递到控制器:
app.controller('SomeController', function($scope, $stateParam) {
//..
var foo = $stateParam.foo; //getting fooVal
var bar = $stateParam.bar; //getting barVal
//..
});
.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;
})
<a ui-sref="home({foo: 'fooVal1', bar: 'barVal1'})">
<a ui-sref="home({foo: 'fooVal2', bar: 'barVal2'})">
参数的文档中描述了参数的可用设置
以下只是摘录
- value-{object | function=}:指定此参数的默认值。这隐式地将此参数设置为可选
- 数组-{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]})">
//无法通过url传递隐藏参数
您不一定需要在URL中包含参数
例如:
$stateProvider
.state('home', {
url: '/',
views: {
'': {
templateUrl: 'home.html',
controller: 'MainRootCtrl'
},
},
params: {
foo: null,
bar: null
}
})
您可以使用以下任一方式将参数发送到状态:
$state.go('home', {foo: true, bar: 1});
// or
<a ui-sref="home({foo: true, bar: 1})">Go!</a>
$state.go('home',{foo:true,bar:1});
//或
,在state(name,stateConfig)
部分的params
行下。您只是拼错了$stateParam
,它应该是$stateparms
(带s)。这就是为什么没有定义;) 你也需要在你的路线上设置它们。例如:-url:'…/home/:foo/:bar
@PSL:你能在这里举个小例子吗?谢谢。@PSL:谢谢PSL,有没有其他方法可以将这些参数及其值放在控制器中?Do“/:foo/:bar”:{
在你的空白路径中,或者你也可以设置为querystring。一般来说,这应该作为问题的注释。但是无论如何+1对于阅读问题和理解问题所付出的努力:)params属性,对我来说非常好!!!!!谢谢!!你是谷歌专家伟大的答案,但是如果我想做点什么呢ike this-这不起作用。我怎样才能让它起作用?@Radim,你能看一下并帮我一点忙吗?这真的很有帮助!谢谢你发布这篇文章。回答得很好,真的很有帮助。谢谢!你也可以有这样的url:url:/:id?foo&bar”