one-time binding with ng-if in angular?

Question

If I have a view that does:

<div ng-repeat="foo in foos">
  <p ng-if="bar">omg lol</p>
  <p ng-if="!bar">lol omg</p>
</div>

I am actually creating (2 * foos.length) + 1 $$watchers, which is really not good. I have found several sources online that say you can do ng-if="::bar", but the number of watchers does not change when I do that. Is there a way to force ng-if to be a one time binding?

It is really, really dumb to have to do:

<div ng-repeat="foo in foos" ng-if="bar">
  <p>omg lol</p>
</div>
<div ng-repeat="foo in foos" ng-if="!bar">
  <p>lol omg</p>
</div>

Which I believe will give me something like 4 $$watchers instead... So I am looking for an alternative to avoid having to be silly like that.

:: is one time binding. Just that it wil have a temporary watch created initially and then removed once value is assigned to the bound property. Do you have a proof plunker? — PSL, Jun 18 '15 at 00:03
Yes, here is a plunker showing that 2 seconds after the dom has been rendered, the $$watcher count is 2000 just from an ng-if... http://plnkr.co/edit/JgP3lRyuSoSPQNIgR8Ri?p=preview — patrick, Jun 18 '15 at 00:46
totally confused... what? so you are saying the alert window pops up after the timeout on your browser says 2 watchers? — patrick, Jun 18 '15 at 00:51
Yup..ofcourse. I tried in chrome and FF (should not matter though). Click on those 2 links in my comment. Just imagine that was the whole purpose of using 1-time binding and motivation for anybody (atleast i did :) ) to migrate when it released to get over the hangover from bindonce. — PSL, Jun 18 '15 at 00:52
I apologize, I thought I had saved the version with ::lol, not just lol. Well, this is very odd because this is not the behavior I am experiencing with my app, the :: prefixes in my ng-ifs are doing absolutely nothing and my watcher count is in the thousands, so I think I need to investigate further. — patrick, Jun 18 '15 at 00:54
That could well be because in your app actual data might be bound in deferred manner (via ajax call or so). Until then these watchers will be there (they are removed the moment it gets a non-undefined value). If it does not do that one time binding would have been a failure for deferred data binding approaches. — PSL, Jun 18 '15 at 00:56
Ah.. no i just figured out what it is! My directive uses configuration to say whether or not to render things in the view's ng-repeater... And some of the configuration options are false by default simply by not supplying the values. It appears if scope.lol is undefined, then ::lol still adds watchers. http://plnkr.co/edit/Gdb893nV4JdzeCDtnkyZ?p=preview — patrick, Jun 18 '15 at 01:00
This is expected. See my prev comment (the stuff in the bracket). You are not setting anything on lol. And if you expect lol to be set during some operation this will not happen right. If that condition fails set it to false. You just need to make sure if you are setting a one-time binding you ultimately end up setting some value (even null is a value which is falsy) to it. Which is not big of a deal if you get the advantage of clearing unwanted watches. — PSL, Jun 18 '15 at 01:03
Thank you for the help. You should post an answer so I can accept it. — patrick, Jun 18 '15 at 01:09
You are welcome. Glad i was able to clarify.. Sure i will expand my comments to an answer. Thx! — PSL, Jun 18 '15 at 01:11

PSL · Accepted Answer · 2015-06-18T01:23:00.697

Just extending my comments to answer.

Angular 1.3 one-time binding syntax (::) indeed will remove unnecessary watches. Just that you need to measure the watches a while after you set the relevant data. Here is why it is. When you set a one-time bound property on the view, angular will set a temporary watch on it until it gets a defined value, i.e anything but undefined. This approach is there for a reason - in order to support the bound values that are populated via a deferred operation like ajax call, timeout, promise chain resolution etc.. Without this :: will not work successfully on anything but pre-populated bound values.

So just make sure that you set some value at some point in time to the one-time bound values. Don't let it remain undefined.

Say when you have a condition <div ng-if="::lol"></div> repeated 100 times. Just make sure when you bind the value to the repeater or some operation that determines the status of lol even if that operation fails (say a ajax call error) still set a value (even null is also a value in javascript) to it. Watches will be removed after the upcoming digest cycle which renders the respective DOM bindings.

In your specific plunker you could as well do:

<ul ng-repeat="item in items"  ng-if="::lol">
  <li>{{ ::item }}</li>
</ul>

instead of

<ul ng-repeat="item in items">
  <li ng-if="::lol">{{ ::item }}</li>
</ul>

score 0 · Answer 2 · edited Jul 07 '17 at 11:43

0

You need to use Bindeonce to do this : https://github.com/Pasvaz/bindonce

edited Jul 07 '17 at 11:43

Devid Farinelli

7,514
9
42
73

answered Jun 17 '15 at 23:47

Claude

417
1
8
15

2

Not since Angularjs 1.3 that natively supports one time bindings using the :: syntax – masimplo Jun 17 '15 at 23:49
@mxa055 did you read my question? ng-if="::foo" does nothing. It still creates gazillions of watchers. – patrick Jun 17 '15 at 23:52

one-time binding with ng-if in angular?

2 Answers2