问题 使用ui-router的“bool”param类型的正确方法是什么?


我一直在尝试使用ui-router的param类型,似乎无法使它们正确。

$stateProvider.state({ name: 'home.foo', url: '/foo/{isBar:bool}', controller: function() { }, templateUrl: 'foo.html' });

我的期望是我应该能够像这样过渡到那个州:

$state.go(home.foo, { isBar: false })

要么

ui-sref="home.foo({ isBar: false })"

但是在结果$ stateParams中你会看到isBar:true

看着'布尔'的方式 param类型是写的 我认为true / false应该在url上编码为0/1,但这不会发生。如果在$ state.go的params中使用0/1然后它工作并被解码为false / true但是为了进一步混淆问题,如果使用ui-sref则这不起作用。

希望这个 plunker 会更好地解释它。任何提示赞赏!

编辑:我使用bool param类型的目的是在$ stateParams中使用布尔数据类型


7965
2017-11-27 20:19


起源

这是0.2.13中的错误行为,并在此提交中得到修复: github.com/angular-ui/ui-router/commit/... 。如果你是从大师那里建造的,你的插件就可以了。 plnkr.co/edit/u3NsF0PSmNt3HWiQkdvP?p=preview - Chris T
嘿,谢谢克里斯!这也会为你解决这个问题吗? github.com/angular-ui/ui-router/issues/1655 - brahnp


答案:


有一个 更新和工作的plunker与 boolean 自定义类型

在这种情况下,我们希望与...合作 布尔 喜欢类型,哪个 期望并接受:

truefalse01 

我们只需要注册我们的自定义类型:

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

  $urlMatcherFactory.type('boolean',
    // our type custom type
    {
     name : 'boolean',
     decode: function(val) { return val == true ? true : val == "true" ? true : false },
     encode: function(val) { return val ? 1 : 0; },
     equals: function(a, b) { return this.is(a) && a === b; },
     is: function(val) { return [true,false,0,1].indexOf(val) >= 0 },
     pattern: /bool|true|0|1/
    })

}]);

然后我们可以在任何状态下使用此url定义:

...
, url: '/foo/{isBar:boolean}'
...

注意:为什么 boolean?不 bool?因为 bool 已经注册 0|1 就目前我所记得的

核实 这里

原版的

使用“字符串”的简单解决方案 在这个更新的plunker

... // states definitions
, url: '/foo/{isBar:(?:bool|true|0|1)}'

10
2017-11-28 04:59



$ stateParam中的类型是一个字符串。我现在意识到我的问题并不明确,但我追求的结果是{isBar:true / false} - brahnp
的力量 UI-Router 是无限的;)享受它;) - Radim Köhler
谢谢Radim,它看起来比我以后更多:)我确实看了注册自定义类型,但想尝试理解为什么默认的bool不能先工作。我仍然不太明白它应该达到什么目标,或者它是否只是破碎了! - brahnp
幸运的是,你有答案 boolean ;)如果您想了解更多信息,请在此处观察源代码: github.com/angular-ui/ui-router/tree/master/src。祝UI-Router好运;) - Radim Köhler
谢谢@RadimKöhler。我想知道它是否可以检测查询字符串是什么时候 undefined。例如 /foo?{isBar:boolean} 给 false 当实际网址是 /foo 没有查询字符串。我现在想弄明白。据我测试过, undefined 不符合 $state.includes。 - PSWai


因此,在挖掘多个文件后,我发现为什么最后两种方式(0,1)在ui-sref中不起作用。在stateDirectives.js的第106行有这个电话: newHref = $state.href(ref.state, params, options);

在使用1和0的情况下,这将返回null。由于上面的调用后面是:

 if (newHref === null) {
      nav = false;
      return false;
    }

永远不会有链接。现在,返回原因null。 state.href调用urlRouter.href。在里面是一个验证params的调用。验证是这样的: result = result && (isOptional || !!param.type.is(val));

当你看到bool的函数时(is: function(val) { return val === true || val === false; }你可以看到为什么这个失败,因为1和0不等于真或假。在我看来,它应该检查1和0,如果这是它最终转换为什么,但至少现在你知道它为什么行为它的行为。


1
2017-11-27 21:02



谢谢杰森。我更新了plunker以包含使用$ state.go的示例,但它与ui-sref的行为相同。在我更复杂的应用程序中,0/1正确解码为false / true。我将继续尝试在plunker中复制它。 - brahnp