Minimize watcher count

[Ivshti]

I've been trying to optimize an angular (1) application, and I found out that every instance of round-progress is additional watchers for max, color, bgcolor, radius, stroke and responsive. Is it possible to use one-time binding for those?

[Ivshti]

Actually, even the properties that don't get set are watched

[crisbeto]

You can set a one-time binding in your own templates, just prefix the data binding with ::. Otherwise excluding properties that aren't set from the $watchGroup makes sense.

[Ivshti]

afaik the watch group includes a fixed list of properties - how about filtering to only the ones which are set by the user?

also, I tried doing things like: max="::100", didn't work

as for stuff like the color, which are strings - I have no idea; just putting a "::" does not make sense, doing a ::"#ee...." does make sense but the binding doesn't work that way

[crisbeto]

By using one-time bindings, the watchGroup will still watch for changes, it just won't fire as often. I'll add filtering only for the specified properties when I get some more time.

[Ivshti]

I understand that, but can you give specific examples of how one-time binding works with round-progressbar?

I tried: max="::100" radius="::2.5" for starters, did not work at all (as if I didn't passed the props)

Angular 1.5.7

[crisbeto]

max="100" radius="2.5" Won't fire watchers at all since it doesn't have a data binding. The cases where it would are something like max="{{ max }}" in which case you can do max="{{ ::max }}" to turn it into a one-time binding.

[Ivshti]

Got it. I am confused by the fact that the watchers exist, I don't know when they're fired. Let me illustrate:

[crisbeto]

Yes, the way it works is that it passes an array of all the properties to $watchGroup, which then calls $watch on each of them behind the scenes. The difference between doing this and individual watches is that they all fire the same callback when any one of them changes.

[Ivshti]

Since this is a relatively vital issue for us - this directive adds around ~1000 watchers to our application - I implemented a (ugly) solution

            if (scope.noListen) { 
                Object.keys(options).forEach(function(k) {
                    if (scope[k]) options[k] = scope[k]
                });
                renderState(scope.current, scope.current, true);
                renderCircle();
                return;
            }

after defining renderState (and ofc adding "noListen: '@'")

Please think of a more elegant way to do this, and I'd PR

[crisbeto]

Done in 0.4.6. Note that if you specified something like max="100", it will still be watched, even though it doesn't have a data binding.