将复杂对象传递给ui-sref params

Question

我需要这样的构建URL: / list？filter [status] = 1&filter [type] = 2

我做:

链接:

<a ui-sref="list({filter: {status: 1, type:2}})">List</a>

(在params传递复杂对象,如果传递简单对象 - {filter:1} - 没关系,但我需要这个)

州:

.state('list', {
    url:        '/list?filter',
    …
})

总的来说我得到的网址如下:

/list?filter=[object Object]

演示:http://plnkr.co/edit/wV3ieKyc5WGnjqw42p7y?p=preview

我怎么解决它？

Answer 1

在UI-Router现在附带的支持custom types则params的.你的plunker 有更新和工作版本.

所以,我们可以像这样调整状态def:

app.config(function($stateProvider) {
  $stateProvider.state('list', {
    url: 'list?{filter:CoolParam}',

我们可以看到,过滤器现在是类型CoolParam.在这里我们将定义它:

app.config(['$urlMatcherFactoryProvider', function($urlMatcherFactory) {

  $urlMatcherFactory.type('CoolParam',
  {
     name : 'CoolParam',
     decode: function(val)  { return typeof(val) ==="string" ? JSON.parse(val) : val;},
     encode: function(val)  { return JSON.stringify(val); },
     equals: function(a, b) { return this.is(a) && this.is(b) 
                                  && a.status === b.status && a.type == b.type },
     is: function(val)      { return angular.isObject(val) 
                                  && "status" in val && "type" in val },
  })

}]);

现在这样{{$stateParams}}的链接:

<a ui-sref="list({filter: {status: 1, type:2}})">Click me to see params</a>

将返回:

{"filter":{"status":1,"type":2}}

注意:在这种情况下,我让我的生活更轻松,并简单地将json转换为字符串.这意味着,url编码的param将如下所示:

#/list?filter=%7B%22status%22:1,%22type%22:2%7D

是的 {"status":1,"type":2}

但我们还可以提供其他方式来表达我们的过滤器对象

检查它在这里

还有相关的问答:

• Angular ui路由器解析查询参数到布尔值
• 使用ui-router的"bool"param类型的正确方法是什么？

所以,上面的解决方案很好地使用filter作为JSON.但是如果我们必须有这样的url ?filter[status]=1&filter[type]=2,我们必须以不同的方式定义状态.必须将每个参数声明为单独的简单类型

$stateProvider.state('list2', {
    url: 'list2?state&type',
})

但在这种情况下,我们会这样?status=1&type=2.此映射也是此plunker的一部分.