如何通过传递参数的UI SREF在UI的路由器控制器 [英] How to pass parameters using ui-sref in ui-router to controller

问题描述

我需要传递和收到两个参数我要过境国家使用的UI路由器 UI-SREF 。

喜欢的东西使用下面的过渡状态的链接首页与富和酒吧参数：

 ＆LT;一个UI的SREF =家（{富：fooVal'，巴：barVal'}）＆GT;转到家乡与foo和bar参数＆LT; / A＆GT;
 

接收富和栏控制器中的值：

  app.controller（'SomeController'，函数（$范围，$ stateParam）{
  // ..
  无功富= $ stateParam.foo; //获取fooVal
  VAR栏= $ stateParam.bar; //获取barVal
  // ..
}）;
 

我得到未定义为 $ stateParam 在控制器中。

有人能帮助我了解如何把它做？

编辑：

  .STATE（'家'，{
  网址：'/'，
  观点：{
    ''：{
      templateUrl：home.html做为'，
      控制器：'MainRootCtrl    }，    '一个家'： {
      templateUrl：a.html，
      控制器：'MainCtrl
    }，    B @家：{
      templateUrl：b.html'，
      控制器：'SomeController
    }
  }}）;
 

解决方案

我创建了一个例子以显示如何。更新状态的定义是：

  $ stateProvider
    .STATE（'家'，{
      网址：'/：富巴，
      观点：{
        ''：{
          templateUrl：tpl.home.html'，
          控制器：'MainRootCtrl        }，
        ...
      }
 

和这将是控制器：

  .controller（'MainRootCtrl'，函数（$范围，$状态，$ stateParams）{
    // ..
    无功富= $ stateParams.foo; //获取fooVal
    VAR栏= $ stateParams.bar; //获取barVal
    // ..
    $ scope.state = $ state.current
    $ scope.params = $ stateParams;
}）
 

我们可以看到的是，邦家目前已网址定义为：

  URL：/？富巴，
 

这意味着，在URL中的PARAMS预计为

  / fooVal？巴= barValue
 

这两个环节将正确参数传递到控制器：

 ＆LT;一个UI的SREF =家（{富：fooVal1'，巴：barVal1'}）＆GT;
＆LT;一个UI的SREF =家（{富：fooVal2'，巴：barVal2'}）＆GT;
 

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

文档链接：

• URL参数

您可以检查一下这里

params：一个{}

还有的新的的，更细化的设置的 params：一个{} 的。正如我们已经看到的，我们可以为 网​​址 部分来声明参数。但随着 params：一个{} 配置 - 我们可以扩展这个定义，甚至引进paramters不属于URL的一部分：

  .STATE（'其他'，{
    网址：'/其它/？富巴，
    params：一个{
        //这里我们定义foo的默认值
        //我们还设立壁球为假，强迫注射
        //甚至默认值进入网址
        富：{
          值：'设置defaultValue'，
          壁球：假的，
        }，
        //这个参数是现在阵
        //我们可以通过更多的项目，并期望他们为[]
        酒吧：{
          数组：真实，
        }，
        //这个参数是不是URL的一部分
        //它可以用$ state.go或UI-SREF传递
        hiddenParam：'YES'，
      }，
    ...
 

可供PARAMS设置的文档<一中描述href=\"http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$stateProvider\">$stateProvider

下面仅仅是一个提取

• 价值 - {对象|功能=} ：指定这个参数的默认值。这隐式地设置该参数为可选...


• 阵列 - {布尔=} （默认：false）如果为真，该参数值将被视为值的数组。


• 壁球 - {布尔|字符串=}：壁球配置默认的参数值是如何重新在URL psented $ P $当电流参数值相同的默认值

我们可以调用这些PARAMS是这样的：

  //隐藏的参数无法通过URL传递
＆所述; A HREF =＃/其他/ fooVal巴= 1和;放大器;巴= 2＆GT;
//默认富被跳过
＆LT;一个UI的SREF =其他（{吧：[4,5]}）＆GT;
 

检查它在这里行动

I need to pass and recieve two parameters to the state I want to transit to using ui-sref of ui-router.

Something like using the link below for transitioning the state to home with foo and bar parameters:

<a ui-sref="home({foo: 'fooVal', bar: 'barVal'})">Go to home state with foo and bar parameters </a>

Receiving foo and bar values in a controller:

app.controller('SomeController', function($scope, $stateParam) {
  //..
  var foo = $stateParam.foo; //getting fooVal
  var bar = $stateParam.bar; //getting barVal
  //..
});     

I get undefined for $stateParam in the controller.

Could somebody help me understand how to get it done?

Edit:

.state('home', {
  url: '/',
  views: {
    '': {
      templateUrl: 'home.html',
      controller: 'MainRootCtrl'

    },

    'A@home': {
      templateUrl: 'a.html',
      controller: 'MainCtrl'
    },

    'B@home': {
      templateUrl: 'b.html',
      controller: 'SomeController'
    }
  }

});

解决方案

I've created an example to show how to. Updated state definition would be:

  $stateProvider
    .state('home', {
      url: '/:foo?bar',
      views: {
        '': {
          templateUrl: 'tpl.home.html',
          controller: 'MainRootCtrl'

        },
        ...
      }

And this would be the controller:

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

What we can see is that the state home now has url defined as:

url: '/:foo?bar',

which means, that the params in url are expected as

/fooVal?bar=barValue

These two links will correctly pass arguments into the controller:

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

Also, the controller does consume $stateParams instead of $stateParam.

Link to doc:

• URL Parameters

You can check it here

params : {}

There is also new, more granular setting params : {}. As we've already seen, we can declare parameters as part of url. But with params : {} configuration - we can extend this definition or even introduce paramters which are not part of the 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',
      },
    ...

Settings available for params are described in the documentation of the $stateProvider

Below is just an extract

• value - {object|function=}: specifies the default value for this parameter. This implicitly sets this parameter as optional...
• array - {boolean=}: (default: false) If true, the param value will be treated as an array of values.
• squash - {bool|string=}: squash configures how a default parameter value is represented in the URL when the current parameter value is the same as the default value.

We can call these params this way:

// 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]})">

Check it in action here

这篇关于如何通过传递参数的UI SREF在UI的路由器控制器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！