CODEWITHSUNDEEP
javascriptangularjs
Chandler Freeman
Chandler Freeman

Reputation: 899

How to update ng-if in Angular?

I am writing an Angular application where the navbar is supposed to be different depending on whether or not the user is logged in. I have an angular view that looks like this:

<!-- Auth -->
<nav ng-if="isAuthenticated()" class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
      ...
    </div>
</nav>

<!-- No auth -->
<nav ng-if="!isAuthenticated()" class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
      ...
    </div>
</nav>

<!-- Content -->
<div ng-view></div>

With this controller:

$scope.isAuthenticated = function() {
    return $auth.isAuthenticated();
};

When the page initially loads, this works perfectly; however, after the user logs in, the navigation view doesn't change, even though isAuthenticated() now returns a different value. I read about ng-if creating it's own scope, and tried to do this:

<!-- Auth -->
<nav ng-if="nav.auth" class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
        ...
    </div>
</nav>

<!-- No auth -->
<nav ng-if="!nav.auth" class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
        ...
    </div>
</nav>

<!-- Content -->
<div ng-view></div>

Controller:

$scope.nav = {
    auth: false
};

$scope.isAuthenticated = function() {
    return $auth.isAuthenticated();
};

$scope.$watch($scope.isAuthenticated(), function(value) {
    console.log("Authentication changed; status: " + value);
    $scope.nav.auth = value;
});

But this doesn't seem to work either. Is there a way I can update ng-if so that the isAuthenticated function is checked continuously?

Upvotes: 3

Views: 9488

Answers (3)

Leon Gaban
Leon Gaban

Reputation: 39018

In this exact case I would use ng-show and ng-hide because: When to favor ng-if vs. ng-show/ng-hide?

$scope.isAuth = false;

function isAuthenticated() {
    $scope.isAuth = checkAuthStatus();

    function checkAuthStatus() {
        return $auth.isAuthenticated();
    }
}

Then in the markup:

<!-- Auth -->
<nav ng-show="isAuth" class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
      ...
    </div>
</nav>

<!-- No auth -->
<nav ng-hide="isAuth" class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
      ...
    </div>
</nav>

You could also use ng-class as well, as it's slightly better performance wise in some cases.

<nav ng-class="{ 'display-on' : isAuth }"

Upvotes: 4

Govinda raj
Govinda raj

Reputation: 663

On the controller create a scope variable and use the same in the ng-class, no need to use watch functions. 

 $scope.isAuthenticated = function() {
    $scope.navclass = 'notAuthenticated';
    if ($auth.isAuthenticated()) {
        $scope.navclass='Authenticated';
    } 
};

Upvotes: 0

Pallavi
Pallavi

Reputation: 674

You need not to update ng-if rather you need to call isAuthenticated() function again so that it will update the value say from true to false or something like that

Upvotes: 0

Related Questions