AngularJs one time binding and order of values with boolean operators

Question

What impact does the order in which boolean operators are declared have?

Controller:

$scope.show = false;

$scope.clickMe = function() {
  $scope.show = true;
  $scope.name = 'Name defined'
};

Template:

<button ng-click="clickMe($event)">Click Me</button>
<p ng-if="::(show && name)">show && name</p>
<p ng-if="::(name && show)">name && show</p>

Results in the second p element with the order of name && show displaying after clicking button. I understood that neither p element should display as $scope.show is already defined and one time binding has been used?

plunkr here:

http://plnkr.co/edit/P0E1RhNK9EPh2Pi04c9T?p=preview

maybe because $scope.name was not defined yet ? What about if you init $scope.name to 'name undefined' ? — Walfrat
– Walfrat, Commented Apr 13, 2016 at 13:05

Scott · Accepted Answer · 2016-04-13 13:10:31Z

4

In Angular, one time binding will constantly evaluate the expression until it has a non-undefined value. So in your example, because name is not defined yet name && show constantly evaluates as undefined on every digest until you finally set it. If you use !! to coerce name to a boolean then you'll get different behaviour. From the Angular docs on expressions:

One-time expressions will stop recalculating once they are stable, which happens after the first digest if the expression result is a non-undefined value (see value stabilization algorithm below).

So it doesn't evaluate once per se, it evaluates to a value once.

answered Apr 13, 2016 at 13:10

Scott

8608 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jimmy Over a year ago

Thanks for your answer. I guess this is more of a general javascript question. Why does name && show === undefined and not show && name

Scott Over a year ago

The && operator doesn't evaluate to a boolean, if the left hand side is falsey then it returns that, otherwise it will return the right hand side. So undefined && false is undefined while false && undefined is false. If name in your example was '' instead, then both ::(name && show) and ::(show && name) would have the same behaviour.

Scott Over a year ago

The MDN docs for logical operators are very thorough and a lot better than my explanation as well.

Collectives™ on Stack Overflow

AngularJs one time binding and order of values with boolean operators

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related