angularjs ng-show with promise expression

Question

I'm using ng-show with an expression that resolves to a promise that resolves to a boolean. When I do this I get the 10 digest iterations overflow.

See http://plnkr.co/edit/XibYM0kCnXhKjNUeTsp3?p=preview

  <body ng-controller="MainCtrl">
    <p ng-show="returnsABoolean()">non promise</p>
    <p ng-show="returnsAPromiseThatResolvesToABoolean()">promise</p>
  </body>

Ctrl:

  $scope.returnsABoolean = ()->
    true

  $scope.returnsAPromiseThatResolvesToABoolean = ()->
    $q.when(false)

I know that {{somePromise}} will resolve, but {{returnsAPromiseThatResolvesToABoolean()}} seems to cause the same issue.

Any ideas? I'd expect this to work..

zs2020 · Answer 1 · 2013-09-06T22:10:15.873

7

AngularJS resolves the promise for template binding automatically. However, you should use the promise in ng-init to prevent the digest cycle from returning a new promise every tick.

<p ng-init="v=returnsAPromiseThatResolvesToABoolean()" ng-show="v">promise</p>

edited Sep 06 '13 at 22:10

answered Sep 06 '13 at 22:05

zs2020

53,766
29
154
219

2

According to the Angular 1.3 docs, this wouldn't be an appropriate use of ng-init: `The only appropriate use of ngInit is for aliasing special properties of ngRepeat, as seen in the demo below. Besides this case, you should use controllers rather than ngInit to initialize values on a scope.`, https://docs.angularjs.org/api/ng/directive/ngInit – Murphy Randle Oct 10 '14 at 14:03

Roy Daniels · Answer 2 · 2013-09-06T21:54:29.287

5

Plunker: http://plnkr.co/edit/NvjP5qHafhyIWXXotBej?p=preview

This works as I think you intended it to. $q.when() returns a promise object, so ng-show is not getting a boolean value; it's getting a promise object.

Updated template:

  <body ng-controller="MainCtrl">
    <p ng-show="returnsABoolean()">non promise</p>
    <p ng-show="returnsAPromiseThatResolvesToABoolean">promise</p>
  </body>

Updated Ctrl:

  $scope.returnsABoolean = ()->
    true

  promise = $q.when(false)
  promise.then((val) ->
    $scope.returnsAPromiseThatResolvesToABoolean = val)

edited Sep 06 '13 at 21:54

answered Sep 06 '13 at 21:49

Roy Daniels

6,309
2
27
29

Can you provide a Plunkr in JavaScript? – Bruno Finger Jul 29 '16 at 12:38
2

Less "returnsAPromiseThatResolvesToABoolean" and more "willAtSomePointBeABooleanPropertySetToTheResolvedValueOfAPromiseInAThenCallback" now. – morewry Oct 13 '16 at 03:26

score 2 · Answer 3 · edited May 23 '17 at 12:09

If you check out the sources here you 'll see that the promise is resolved in nextTick, so the $scope only changes the next time angular makes a $digest cycle. But your function returns a new promise on every $digest cycle, never actually getting the resolved value of the previous promise.

It's an old problem discussed here also.

You can overcome this issue by keeping a "persistent" reference to your promise outside the function as I did here.

angularjs ng-show with promise expression

3 Answers3

Linked