One-time binding for ng-if
AngularJS's one-time binding is useful to reduce the number of watches. It stops watching its expression once it becomes defined. It kindly keeps watching while the value is undefined
for cases like asynchronous data fetching. But the kindness can be a pitfall especially for directives that take boolean
expressions like ng-if
.
Here's an ordinary piece of AngularJS template. It shows 'Something' when obj.prop
exists.
<div ng-if="::obj.prop">Something</div>
It works almost fine. But it keeps watching the expression when the message is hidden. Guess what?
Yes! It keeps watching while the expression is undefined
. Let's make sure that it's always boolean
.
<div ng-if="::!!obj.prop">Something</div>
Here we see the birth of a new operator ::!!
!