AngularJS ui路由器在没有URL的状态之间传递数据


146

我面临着在两个状态之间传递数据而不暴露url中数据的问题,就像用户不能真正直接进入此状态一样。

例如。我有两个状态“ A”和“ B”。我正在状态“ A”进行一些服务器调用,并将调用的响应传递到状态“ B”。服务器调用的响应是一个字符串消息,该消息很长,因此我无法在url中公开它。

那么,在不使用url参数的情况下,有角ui路由器中有什么方法可以在状态之间传递数据?

Answers:


185

我们可以使用params的UI,路由器的功能:

API参考/ ui.router.state / $ stateProvider

params一个映射,可以选择配置在url中声明的参数,或定义其他非URL参数。对于每个要配置的参数,添加一个键入参数名称的配置对象。

参见以下部分:“ ...或定义其他非URL参数...

因此状态def为:

$stateProvider
  .state('home', {
    url: "/home",
    templateUrl: 'tpl.html',
    params: { hiddenOne: null, }
  })

上面文档很少有示例:

// define a parameter's default value
params: {
  param1: { value: "defaultValue" }
}
// shorthand default values
params: {
  param1: "defaultValue",
  param2: "param2Default"
}

// param will be array []
params: {
  param1: { array: true }
}

// handling the default value in url:
params: {
  param1: {
    value: "defaultId",
    squash: true
} }
// squash "defaultValue" to "~"
params: {
  param1: {
    value: "defaultValue",
    squash: "~"
  } }

EXTEND-工作示例:http : //plnkr.co/edit/inFhDmP42AQyeUBmyIVl?p=info

这是状态定义的示例:

 $stateProvider
  .state('home', {
      url: "/home",
      params : { veryLongParamHome: null, },
      ...
  })
  .state('parent', {
      url: "/parent",
      params : { veryLongParamParent: null, },
      ...
  })
  .state('parent.child', { 
      url: "/child",
      params : { veryLongParamChild: null, },
      ...
  })

这可能是使用ui-sref的调用:

<a ui-sref="home({veryLongParamHome:'Home--f8d218ae-d998-4aa4-94ee-f27144a21238'
  })">home</a>

<a ui-sref="parent({ 
    veryLongParamParent:'Parent--2852f22c-dc85-41af-9064-d365bc4fc822'
  })">parent</a>

<a ui-sref="parent.child({
    veryLongParamParent:'Parent--0b2a585f-fcef-4462-b656-544e4575fca5',  
    veryLongParamChild:'Child--f8d218ae-d998-4aa4-94ee-f27144a61238'
  })">parent.child</a>

这里查看示例


如建议的那样,我尝试在嵌套状态下使用参数(示例-“ / user / profile / contacts”,这给了我一些错误。我是否还需要为父状态定义“参数”?
vijay tyagi

似乎不必让父级定义参数,这要感谢详细的答案。
vijay tyagi'2

太好了,如果有什么帮助;)享受强大的UI路由器
RadimKöhler2015年

1
不幸的是,这不适用于ui-router 0.2.10,这就是我正在使用的,将版本更改为0.2.10时出现此错误-错误:状态“ home”中的参数无效
vijay tyagi

1
@vijaytyagi,您应该升级。简而言之,没有理由继续运行旧版本。就我所记得,这一举动应该很顺利……
RadimKöhler2015年

38

params对象包含在$ stateParams中,但不会成为url的一部分。

1)在路由配置中:

$stateProvider.state('edit_user', {
    url: '/users/:user_id/edit',
    templateUrl: 'views/editUser.html',
    controller: 'editUserCtrl',
    params: {
        paramOne: { objectProperty: "defaultValueOne" },  //default value
        paramTwo: "defaultValueTwo"
    }
});

2)在控制器中:

.controller('editUserCtrl', function ($stateParams, $scope) {       
    $scope.paramOne = $stateParams.paramOne;
    $scope.paramTwo = $stateParams.paramTwo;
});

3A)从控制器更改状态

$state.go("edit_user", {
    user_id: 1,                
    paramOne: { objectProperty: "test_not_default1" },
    paramTwo: "from controller"
});

3B)在html中更改状态

<div ui-sref="edit_user({ user_id: 3, paramOne: { objectProperty: 'from_html1' }, paramTwo: 'fromhtml2' })"></div>

柱塞示例


1
谢谢,完美。还请注意,如果您同时需要$ state和$ stateParams,则只需注入$ state。stateParams对象是$ state的属性:$ state.params。
Michael K

1
必须告诉步骤1(提供默认值)才能使它们其余的工作;-)
Xtreme Biker

2
感谢您提供的简洁示例。为我工作!(UI-Router v 1.0.3)
Roboprog's
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.