I'm currently facing a challenge with Angular's one-time binding feature.
For instance, when I want to utilize ngIf with one-time binding, it typically looks like this:
<div ng-if="::showImage">
<img src="somesource" img-preloader/>
</div>
In such cases, Angular establishes a watch for the expression within the if statement. Once the value is determined and not undefined, the watch is removed.
If the value turns out to be true, then the descendant HTML tree gets added to the DOM and subsequently rendered.
Although this functionality is useful, I aim to avoid the initial watch and only set it up if the expression is undefined. This need arises from a complex scenario in which I require temporary disabling of unnecessary watches.
Hence, I began searching for alternatives to Angular's standard one-time binding and came across angular-once.
Unlike Angular's approach, angular-once implements one-time binding by only creating a temporary watch if the expression evaluates to undefined. If the value resolves on the first attempt, no watch is established. Sounds promising.
This new method allows me to do something like this:
<div once-if="showImage">
<img src="somesource" img-preloader/>
</div>
However, there is an issue - apparently, the descendant HTML tree is initially rendered by default and is only removed from the DOM if once-if evaluates to false afterwards.
The logic behind this behavior can be seen here:
{
name: 'onceIf',
priority: 600,
binding: function (element, value) {
if (!value) {
element.remove();
}
}
},
Yet, this poses an inconvenience for me as rendering the descendant tree upfront causes other complications, such as prematurely downloading images.
Thus, I am exploring ways to implement one-time binding in directives like ngIf without establishing a watch if the expression succeeds parsing and without pre-rendering the descendant tree.