如何在ui-router中使用ui-sref传递参数给控制器

我需要传递和接收两个参数到我想要使用ui-router的ui-sref传输的状态。

就像使用下面的链接，用foo和bar参数将状态转换到home ：

 <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 //.. }); 

我在控制器中获取$stateParam undefined 。

有人能帮助我理解如何完成它吗？

编辑：

 .state('home', { url: '/', views: { '': { templateUrl: 'home.html', controller: 'MainRootCtrl' }, 'A@home': { templateUrl: 'a.html', controller: 'MainCtrl' }, 'B@home': { templateUrl: 'b.html', controller: 'SomeController' } } }); 

Answer 1

我已经创建了一个示例来演示如何。 更新的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', 

这意味着，网址中的参数预计为

 /fooVal?bar=barValue 

这两个链接将正确地将参数传递给控制器​​：

 <a ui-sref="home({foo: 'fooVal1', bar: 'barVal1'})"> <a ui-sref="home({foo: 'fooVal2', bar: 'barVal2'})"> 

此外，控制器消耗$stateParams而不是$stateParam 。

链接到doc：

• 网址参数

你可以在这里查看

params : {}

还有一些新的更精细的设置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的文档中描述了可用于params的设置

下面只是一个摘录

• 值 – {object | function =} ：指定此参数的默认值。 这隐式设置此参数为可选…
• array – {boolean =}：（ default：false）如果为true，则参数值将被视为值的数组。
• squash – {bool | string =}：当当前参数值与默认值相同时，squash配置默认参数值在URL中的表示方式。

我们可以这样称呼这些参数：

 // hidden param cannot be passed via url <a href="#/other/fooVal?bar=1&amp;bar=2"> // default foo is skipped <a ui-sref="other({bar: [4,5]})"> 

在这里检查它的行动

Answer 2

您不一定需要在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> 

当然，如果您在home状态下重新加载页面一次，则会丢失状态参数，因为它们不存储在任何地方。

这个行为的完整描述在这里被记录在 state(name, stateConfig)部分的params行下。

Answer 3

你只是拼错了$stateParam ，它应该是$stateParams （带有一个s）。 这就是为什么你不明白;）