Angular ng-show handling undefined variables

Question

I've two directives which display based on a variable being configured.

This visually worked but during acceptance tests I found a problem. I attempted to assert that if the <settingElement> hasn't been clicked (configuring the var selected), neither directive is displayed. The test passed for <directiveA> but failed for <directiveB> leaving me a little confused.

An example of the code is below:

<settingElement ng-click="selected = trueOrFalse()"></settingElement>

<directiveA ng-show="selected"></directiveA>
<directiveB ng-show="!selected"></directiveB>

Can you show us all of your directive code. Or even better give us a plunker? — amanuel2, Mar 23 '16 at 11:03
I think it's because when `settingElement` is not clicked `selected = undefined` and inside `directiveB` ng-show expression receive true because in JavaScript `!undefined = true` — Sergiy Kozachenko, Mar 23 '16 at 11:12
Thanks Grievoushead! You've help me find the answer, I'll post below — Matthew, Mar 23 '16 at 11:19
Sorry should have been more clear, clicking the `settingElement` does not guarantee a certain outcome so no assumptions on this can be made — Matthew, Mar 23 '16 at 13:34

Matthew · Accepted Answer · 2016-03-23T14:24:09.333

0

Success! At least kinda, visually the code works so instead of testing for isDisplayed I simply asserted that the height and width are both 0... not ideal but works.

edited Mar 23 '16 at 14:24

answered Mar 23 '16 at 11:27

Matthew

385
1
2
13

score 0 · Answer 2 · answered Mar 23 '16 at 12:05

0

Probably a better way of doing this would be to define selected in a parent of both elements, such as:

<div ng-init="selected = false;">
    <settingElement ng-click="selected = true"></settingElement>

    <directiveA ng-show="selected"></directiveA>
    <directiveB ng-show="!selected"></directiveB>
</div>

Another "shorter workaround" would be

<settingElement ng-click="selected = true"></settingElement>

<directiveA ng-show="!!selected"></directiveA>
<directiveB ng-show="!selected"></directiveB>

answered Mar 23 '16 at 12:05

nrausch

172
1
8

Sorry should have been more clear, clicking the `settingElement` does not guarantee a certain outcome so no assumptions on this can be made – Matthew Mar 23 '16 at 13:36
Sounds like pretty bad design for me – nrausch Mar 23 '16 at 14:05
Please do explain. The code itself works... nothing is visible initially and depending on the call a success or fail message is displayed. It's the test asserting `isDisplayed` which fails – Matthew Mar 23 '16 at 14:30

score 0 · Answer 3 · answered Mar 23 '16 at 13:36

0

It is probably due to the expression triggering with undefined values

try with ng-if ="selected" or ng-show="selected==true"

answered Mar 23 '16 at 13:36

thegio

1,233
7
27

Angular ng-show handling undefined variables

3 Answers3