使用ui-router的“bool”参数类型的正确方法是什么?

I have been trying to make use of the param types with ui-router and can't seem to get them right.

我一直在尝试使用ui-router的param类型，但似乎不能正确地使用它们。

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

stateProvider美元。状态({ name:家。foo'， url: '/foo/{isBar:bool}'，控制器:function() {}， templateUrl: 'foo。html " });

My expectation is that I should be able to transition to that state like this:

我的期望是我能像这样过渡到那个状态:

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

state.go美元(回家。foo， {isBar: false}

或

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

ui-sref = "回家。foo({ isBar假}):“

however in the resulting $stateParams you will see isBar: true

然而，在结果的$stateParams中，您将看到isBar: true

Looking at the way the 'bool' param type is written I suppose true/false should be encoded as 0/1 on the url but this doesn't happen. If use 0/1 in the params for $state.go then it works and is decoded as false/true but to further confuse the issue this doesn't work if using the ui-sref.

查看“bool”param类型的编写方式，我认为在url上true/false应该被编码为0/1，但这不会发生。如果在参数中为$state使用0/1。然后运行它，并被解码为false/true，但是为了进一步混淆问题，如果使用ui-sref，这将不起作用。

Hopefully this plunker will explain it better. Any hints appreciated!

希望这个活塞能更好地解释它。任何暗示感激!

Edit: My goal in using the bool param type is to end up with a boolean data type in $stateParams

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

2 个解决方案

#1

There is an updated and working plunker with boolean custom type

有一个带有布尔自定义类型的更新和工作的插入器。

In case, we would like to work with a bool like type, which expects and accepts the:

如果我们想使用bool类型，它期望并接受:

true, false, 0, 1

真的,假的,0,1

we just have to register our custom type:

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

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

}]);

And then we can use this url defintion inside of any state:

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

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

NOTE: why boolean? not bool? Because bool is already registered for 0|1 as far as I remember

注意:为什么布尔?不是保龄球吗?因为我记得bool已经注册了0|1

Check it here

检查在这里

ORIGINAL

原始

simple solution working with "strings" in this updated plunker,

在这个更新的柱塞中使用“字符串”的简单解决方案，

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

#2

So after digging around multiple files I found why the last two ways (0,1) don't work in ui-sref. There is this call at line 106 of stateDirectives.js: newHref = $state.href(ref.state, params, options);

所以在挖掘了多个文件之后，我发现了为什么最后两种方法(0,1)在ui-sref中不起作用。在州指令106行有这样的电话。js:newHref = $ state.href(ref。状态、参数选择);

This will return null in the case of using 1 and 0. And since the above call is followed by this:

如果使用1和0，则返回null。既然上面的呼吁是这样的:

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

a link is never made. Now, the reason null is returned. state.href calls urlRouter.href. Inside that is a call to validate the params. The validation is this: result = result && (isOptional || !!param.type.is(val));

永远不会有链接。现在，返回null的原因。状态。urlRouter.href href调用。内部是一个验证参数的调用。验证是这样的:result = result && (isOptional || !!param.type.is(val));

when you look at the is function for bool (is: function(val) { return val === true || val === false; }) you can see why this fails as 1 and 0 do not equal true or false. In my opinion it should also check for 1 and 0 if that is what it is ultimately converted to but at least now you know why it behaves the way it does.

当您查看bool的is函数(为:function(val) {return val == true || val === = false;})您可以看到为什么它失败为1和0不等于真或假。在我看来，它也应该检查1和0是否最终转化为1但至少现在你知道它为什么会这样。

#1