ng-if not working as expected

[Thomas Smith1]

Hello!

I'm working on a widget that shows a short T&C message before a user can book a desk within the WSD Suite, now I have the T&C pop-up working without an issue. But I want to expand the widget so it can be used else where not as a pop-up.

As such I added a Boolean tick option that and added divs with ng-if to change the layout, much like how the icon link widget works with it's layout.

However, when I add these divs it doesn't work at all.

<div ng-if="data.options.aspopup">
<div id="overlay">
  <div id="text">
    <div id="mainBody">
      <div id="header">&nbsp;</div>
      <div id="title">
        <h2>{{c.options.title}}</h2>
      </div>
      <div id="mainText">
        <div ng-if="c.options.html" ng-bind-html="c.html"></div>
        <div ng-if="c.data.isMobile">
          If you do not accept please click on the back arrow in the top left of your mobile view.
        </div>
        <button type="button" id="myCheck" ng-click="c.showBookingForm()" class="btn btn-primary btn-search button text-overflow-ellipsis">Accept and continue</button>
        <div ng-if="!c.data.isMobile">
          <button type="button" id="decline" ng-click="c.onDecline()" class="btn btn-danger btn-search button text-overflow-ellipsis">Decline and return to workspace home page</button>
        </div>
      </div>
    </div>
  </div>
</div>
</div>
<div ng-if="!data.options.aspopup">
  Hello World
</div>

If the value of aspopup in the options is set to true nothing shows and likewise if it's set to false nothing shows. If I move the Ng-if to within the div with the id of overlay it works, but then this doesn't remove the overlay that prevents the user interacting with the reservation screen.

Any help would be fantastic, I'm currently having to go down the route of developing a separate widget for the pages we want this message but without it being a pop-up.

[Oleg]

I think that you should change data.options.aspopup used in ng-if to c.options.aspopup or to options.aspopup.

[Thomas Smith1]

Thanks for responding to my query, I'm surprised I didn't see that as I used it for the html bind!

Alas, I changed it to c.options.aspopup (see code below) and it didn't change the behaviour.

<div ng-if="c.options.aspopup">
  <div id="overlay">
    <div id="text">
      <div id="mainBody">
        <div id="header">&nbsp;</div>
        <div id="title">
          <h2>{{c.options.title}}</h2>
        </div>
        <div id="mainText">
          <div ng-if="c.options.html" ng-bind-html="c.html"></div>
          <div ng-if="c.data.isMobile">
            If you do not accept please click on the back arrow in the top left of your mobile view.
          </div>
          <button type="button" id="myCheck" ng-click="c.showBookingForm()" class="btn btn-primary btn-search button text-overflow-ellipsis">Accept and continue</button>
          <div ng-if="!c.data.isMobile">
            <button type="button" id="decline" ng-click="c.onDecline()" class="btn btn-danger btn-search button text-overflow-ellipsis">Decline and return to workspace home page</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div ng-if="!c.options.aspopup">
  <b>Hello World</b>
</div>

Additionally, in case you need to see it, my option schema is as below.

[{"name":"html","default_value":" <b>hello</b>","section":"Data","label":"HTML","type":"translated_html"},{"name":"title","section":"Data","label":"Title","type":"string"},{"name":"aspopup","section":"Behavior","default_value":"false","label":"Show as pop-up","type":"boolean"}]

[Oleg]

I'd recommended you to verify whether the value of c.options.aspopup is Boolean (true or false) or String with the text "false" or "true". You can, for example, include

<div>
typeof c.options.aspopup={{typeof c.options.aspopup}}<br/>
c.options.aspopup={{typeof c.options.aspopup}}
</div>

somewhere on your page for testing of that. If c.options.aspopup is a string, then you can use

<div ng-if="c.options.aspopup === 'true'">
   ...
</div>

or to use

<div ng-if="c.options.aspopup || c.options.aspopup === 'true'">
   ...
</div>

<div ng-if="!c.options.aspopup || c.options.aspopup !== 'true'">
   ...
</div>

to make your code working with both strings and Boolean.

[DrewW]

Try using ng-show to see if that changes anything.  Also just before the DIV add {{c.data.options.aspopup}} to see if the value is what you are expecting it to be.