angular js ng-if is not getting return value from async function

Question

I am evaluating a function in a ng if to know if the user has permission to perform an action. The problem is that the function to evaluate makes a call to the backend, and apparently does not work correctly next to the ng-if, since it prints an empty object and not the result that the function returns.

I'm showing the result into the html with this to know what the function is responding to:

{{organizationController.isAllowedToInvite ()}}

this print to me an empty object {}

this is the function that I am evaluating:

self.isAllowedToInvite = () => {

      organizationRoleService.getUserPermissions(self.organizationId)
        .then((response) => {
          const userPermissions = response.data;

          if (userPermissions && userPermissions.organizationPermissions >= 4){
            return true;
          }
          return false;
        }, (error) => {
          console.log(error);
        });
    };

this return a true or false, this works well by itself.

Why can not I show the result of the function when I print in the html? because instead of showing true / false it shows me an empty object {}?

i want it show me true or false, so I can evaluate it in the ng if correctly.

this is my ng-if, obviusly this does not work becouse has a {} value.

ng-if="organizationController.isAllowedToInvite()"

Possible duplicate of How do I return the response from an asynchronous call? — Pop-A-Stash
– Pop-A-Stash, Commented Feb 13, 2019 at 15:51

Karim · Accepted Answer · 2019-02-13 15:54:35Z

2

there's an async operation in your method, you cannot statically check the condition in the if. You should call the method on the controller instantiation and then use a flag that you set to true in case all the conditions are met and check that flag in the template

self.isAllowedToInvite = () => {
      self.isAllowed = false;
      organizationRoleService.getUserPermissions(self.organizationId)
        .then((response) => {
          const userPermissions = response.data;

          if (userPermissions && userPermissions.organizationPermissions >= 4){
            self.isAllowed = true;
          }
        }, (error) => {
          console.log(error);
        });
    };

self.isAllowedToInvite();

and in your template

ng-if="organizationController.isAllowed"

answered Feb 13, 2019 at 15:54

Karim

8,6823 gold badges27 silver badges36 bronze badges

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

Collectives™ on Stack Overflow

angular js ng-if is not getting return value from async function

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related