how to show, hide or change an element attribute when a controller async function resolves?

Question

i have some html elements, and they are hidden using ng-hide

<ion-list>
        <ion-item class="ng-hide" ng-show="isLoggedin()" ng-click="login()">Login</ion-item>
        <ion-item class="ng-hide" ng-show="isLoggedin()" href="#/app/register">Register</ion-item>
</ion-list>

in the controller i have a async function and when it resolves i would like to show those links

$scope.isLoggedin = function(){
    $scope.$on('some_function', function () {
        //this will resolve at some point
        return true;
    });
};

the idea is when isLoggedin() returns true, then the ng-show will be set to true as well.

im not set on using ng-show="isLoggedin()", could be other solution, as long as it uses:

$scope.$on('some_function', function () {
    //this will resolve at some point
});

i could setup some id's and grab the elements and change the class in the controller, but i was thinking if there is a way to watch for the resolve and let the element know to show

any ideas?

Answer 1

Your code looks pretty incomprehensible to me. For example returning true from event observer doesn't do anything at all, AFAIK. Also, don't manually set class="ng-hide" when using ng-show on the same element.

Anyway, if I understand it correctly, you just need to create a boolean property and set it after your asynchronous action completes:

$scope.$on('someEvent', function () {
    $scope.isLoadingFinished = true;
});

&

<item ng-show="isLoadingFinished">...</item>

Answer 2

Instead of using the function isLoggedIn() try with a scoped variable, something like this

$scope.isLogged = false;
...
$scope.$on(....)
  $scope.isLogged = true;
....

and change your html to

<ion-list>
    <ion-item ng-if="isLogged" ng-click="login()">Login</ion-item>
    <ion-item ng-if="!isLogged" href="#/app/register">Register</ion-item>
</ion-list>