Using the promise expression in AngularJS's ng-show

Question

Using the promise expression in AngularJS's ng-show

I have a scenario where I am using ng-show with an expression that evaluates to a promise which then resolves to a boolean. This setup is resulting in a 10 digest iterations overflow error.

For reference, you can view the code snippet at 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>

Controller:

  $scope.returnsABoolean = ()->
    true

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

While I am confident that {{somePromise}} will resolve successfully, the issue seems to arise with

{{returnsAPromiseThatResolvesToABoolean()}}

.

Any suggestions on how to resolve this? I was expecting this implementation to function as intended..

javascript angularjs

Answer 1

Answer №1

Automatically, AngularJS handles resolving promises for template binding. It is recommended to utilize the promise within ng-init to avoid triggering a new promise during every digest cycle.

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

Answer 2

Automatically, AngularJS handles resolving promises for template binding. It is recommended to utilize the promise within ng-init to avoid triggering a new promise during every digest cycle.

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

Answer 3

Answer №2

Check out this Plunker demo: http://plnkr.co/edit/NvjP5qHafhyIWXXotBej?p=preview

The code appears to be functioning as desired. The $q.when() method is returning a promise object, rather than a boolean value, which is then passed to ng-show.

Here is the updated template:

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

And the updated controller:

  $scope.returnsABoolean = ()->
    true

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

Answer 4

Check out this Plunker demo: http://plnkr.co/edit/NvjP5qHafhyIWXXotBej?p=preview

The code appears to be functioning as desired. The $q.when() method is returning a promise object, rather than a boolean value, which is then passed to ng-show.

Here is the updated template:

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

And the updated controller:

  $scope.returnsABoolean = ()->
    true

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

Answer 5

Answer №3

If you take a look at the resources linked here, you will notice that the promise is resolved in the next available tick, causing the $scope to only update during the next angular $digest cycle. However, your function is generating a new promise with each $digest cycle, never waiting for the previous promise to resolve.

This is a known issue that has been previously discussed here.

To resolve this problem, you can maintain a persistent reference to your promise outside of the function, like I have demonstrated here.

Answer 6

If you take a look at the resources linked here, you will notice that the promise is resolved in the next available tick, causing the $scope to only update during the next angular $digest cycle. However, your function is generating a new promise with each $digest cycle, never waiting for the previous promise to resolve.

This is a known issue that has been previously discussed here.

To resolve this problem, you can maintain a persistent reference to your promise outside of the function, like I have demonstrated here.

Using the promise expression in AngularJS's ng-show

Answer №1

Answer №2

Answer №3

Similar questions

Does __ only function with curried functions as intended? What is the reason for it working in this case?

The importance of understanding Req.Body in NODE.JS POST Requests

Troubleshooting a CORS problem with connecting an Angular application to a Node server that is accessing the Spotify

Why is this component not functioning properly?

Using a variable in Ajax URL with Action razor syntax

Display recommendations as soon as a specific character is entered in the text box

Navigating the world of cryptocurrency can be daunting, but with the right tools

Searching through a JSON object for nested objects within objects

The prop observation was activated without any alterations

producing a NaN result when calling a reducer with an integer value

What is the proper way to safely escape a JSON string for an object that contains user-generated content?

"Encountering a 404 error when submitting a contact form in Angular JS

Customize the filename and Task Bar name for your Electron app when using electron-packager

What are the steps to generate an npm package along with definition files?

Executing a callback in AngularJS after multiple HTTP requests have been completed using a forEach loop

Verify the dialog box return with a text input box

I am looking to create a password generator that saves all generated options to a file

Troubleshooting the Width Problem in Bootstrap 5 Dropdowns

Are you transitioning from traditional scroll pagination to using ajax?

JavaScript enables the deletion of a class