Feature request: inverse version of ng-if: ng-notif?

[poshest]

I opened a Stackoverflow issue which describes the use case, which has yet to be answered satisfactorily.

In summary, I wish to use ng-if with one time binding for "initialisation" elements (stuff like "loading..." gifs), so that the element is removed from the DOM once the item is loaded AND the watch binding is then removed.

Basically I want an inverse version of ng-if. ng-hide works for this use case, but doesn't remove DOM elements. So perhaps "ng-notif"?

An alternative, more general case approach, might be to create a "remove watch binding upon..." feature. I propose the following syntax

ng-whatever=":removeBindingLiteral:expressionToEvaluate"

The idea is that when expressionToEvaluate becomes equal to removeBindingLiteral, which appears between the usual bind once ::, the binding (watch) is removed. This would make it possible to use ng-if in the manner in which I intend, vis

<img ng-src="/path/to/loading.gif" ng-if=":false:!vm.isLoading" />

The img will be displayed until the first time the expressionToEvaluate (!vm.isLoading) evaluates (===) to false, at which point the img will disappear from the DOM and the binding will be removed.

If there is a way to do this with the current Angular machinery, I'd love to know! :)

[gkalpak]

I've been bitten by this myself. It is indeed not possible currently and is a usecase (the only one afaik) that makes ngUnless (the opposite of ngIf) enable something that is not already possible.

A more verbose work-around for achieving what you want is to use ngSwitch (although this adds an extra DOM element - which you can hide of course). This can also serve as basis for creating your own ngUnless directive, without having to deal with all the create/cleanup nodes/scopes complexity. EDIT: Probably not worth it. It is easier to copy the source code for ngIf.

<div ng-switch="::(foo || undefined)">
  <div ng-switch-when="undefined">
    This text will be removed for ever,
    once `foo` evaluates to something truthy
  </div>
</div>

[gkalpak]

Here is an "ngUnless" demo. It is just a plain old directive (and not a complex one for that matter), so one can easily include it in their apps or better yet publish it as 3rd-party module for others to use (if someone hasn't done so already).

That said, the overhead of putting it in Angular core would be minimal and I think it might be worth it in order to support the one-time binding usecase.

[poshest]

@gkalpak this is amazing. Thank you so much. :)

I did look at ngIf to see if I could hack it up, but didn't understand where the one-time binding stuff came in. Had I known it was as easy as if (!value)...! :)

I agree it would be a great addition to 1.x. Thanks again for your excellent work on AngularJS.

[poshest]

@gkalpak Mind if I add both of your answers to my Stackoverflow question? I will give you the credit of course. Happy also for you to add the answers under your account. You'll have my votes. Pls let me know.