How to update ng-if in Angular?

Question

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?

How are you updating the authentication state returned by $auth? Are you just using Angular's $http, $timeout etc. services or are you using some other HTTP library or directly using `setTimeout`? It could be just that you're performing an operation that doesn't trigger Angular's digest cycle. — Ates Goral, Feb 02 '16 at 06:31

score 4 · Accepted Answer · edited May 23 '17 at 12:07

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 }"

a global ***authentication service*** would be a better option rather than creating `controller` variables — Minato, Feb 02 '16 at 11:43

score 0 · Answer 2 · answered Feb 02 '16 at 06:19

0

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

answered Feb 02 '16 at 06:19

Pallavi

652
1
10
26

score 0 · Answer 3 · answered Feb 02 '16 at 06:29

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';
    } 
};

How to update ng-if in Angular?

3 Answers3