2

This question has been asked before, but I can't get that solution working, so I'm wondering if there's something different in my specifics.

The code is really, really simple:

<h1 ng-if="vm.building.name !== undefined">update {{vm.building.name}}</h1>

As written, this snippet works fine. If vm.building.name is set, tag appears.

However, if I try to make the one-time binding work, that is:

<h1 ng-if="::vm.building.name !== undefined">update {{vm.building.name}}</h1>

The tag doesn't appear at all. I've tried variations: 

<h1 ng-if="::(vm.building.name !== undefined)">update {{vm.building.name}}</h1>

Still nope. It's such a frustratingly simple thing. Hell, the code seems to work in a jsfiddle, but I can't get it working for my particular app. Is there a setting somewhere? Some random bit of trivia I need to change?

Is there I'm using angular 1.5.7, if that matters.

EDIT

<h1 ng-if="vm.building.name !== undefined">update {{::vm.building.name}}</h1>

That is, setting the {{::vm.building.name}} ultimately gives me the result I'm looking for, but at the cost of a additional, useless watcher, right?

Further edit on my edit: this isn't a great solution for a number of reasons.

EDIT 2

My problem stems from the fact that vm.building.name waits on an API call and therefore misses the first $watch digest (I think). So instead of "one-time" as defined by angular, is there a way to have ng-if do its thing directly after vm.building.name is set the first time and then quit?

Community
  • 1
  • 1
crowhill
  • 2,398
  • 3
  • 26
  • 55

1 Answers1

1

Well, In here you're checking one-time data binding vm.building.name value with undefined and since it is one-time data binding this condition will always be false.

modify your ng-if and make it more simpler 

<h1 ng-if="::vm.building.name">update {{::vm.building.name}}</h1>

Please find working plunker : https://plnkr.co/edit/QA6ZA7e0zHnN45oQWzQH?p=preview

This will work!

Cheers!

Varit J Patel
  • 3,497
  • 1
  • 13
  • 21