Pasvaz/bindonce

bo-switch-when does not work, when value is a string

tylkomat opened this issue · 7 comments

Bo-switch-when does not select the correct value, when comparing with a string. Here is an example:

<div bo-switch="value">
  <div bo-switch-when="'success'">It worked</div>
  <div bo-switch-default>It didn't work</div>
</div>

http://plnkr.co/edit/FUrCzW9sTuLtYOAFgCqc?p=preview

My quick solution just now was using $eval in line 151 and then it works, but just parsing the value should be enough I suppose, scope might not be needed.

case 'boSwitchWhen':
  var ctrl = binder.controller[0]; console.log(binder.attrs.boSwitchWhen);
  ctrl.cases['!' + binder.scope.$eval(binder.attrs.boSwitchWhen)] = 
    (ctrl.cases['!' + binder.scope.$eval(binder.attrs.boSwitchWhen)] || []);
  ctrl.cases['!' + binder.scope.$eval(binder.attrs.boSwitchWhen)]
    .push({ transclude: binder.transclude, element: binder.element });
  break;

Hi @tylkomat
Actually bo-switch, as well as ng-switch, use string for comparison, indeed if you remove the quotes everything works as expected:

<div bo-switch="value">
  <div bo-switch-when="success">It worked</div>
  <div bo-switch-default>It didn't work</div>
</div>

Indeed, but not if that string is a url. My solution has also the advantage, that you can compare to another scope value. I think it also makes sense to use expression here as it is also used everywhere else.

BTW the example in the readme also uses quotes, at least one ^^

I know what you mean but I'm trying to keep the bo-* directives as close as possible to the ng-* directive so people can use them as drop-in replacement for angular standard directives. The change you suggest would break the compatibility with ng-switch.

Thank you for noticing the readme, I'll change it straight away.

Ok I understand, but still it does not work, when the String you compare to is a URL. See this example: http://plnkr.co/edit/p7yuQivWk5RuLhwPRw3e?p=preview
Plunker does not show the JS error.

This is indeed a bug, scope.$eval cannot parse special characters like : or /
It's not related to bo-switch, it is triggered by the default evaluation of the attribute, I'll fix it asap, I'm going to skip the $eval for those tag that doesn't need it.
As temporary workaround you can use:

 <div bo-switch-when="'http://test.com'">It worked</div>

and in the controller:

 $scope.value = "'http://test.com'";

Great, Thanks.