Why does ng-if only work with ng-click if they are in the same element?

Question

I am hiding and showing nav bar elements based on if the user is logged in or out.

In the main controller:

    $scope.FBlogin = function(){
    FB.login(function(response) {
        if (response.authResponse) {
         console.log('Welcome!  Fetching your information.... ');
         FB.api('/me', function(response) {
           console.log('Good to see you, ' + response.name + '.');
           $cookies.put('userObj', response);

           var accessToken = FB.getAuthResponse().accessToken;
           console.log(accessToken);
           authFact.setAccessToken(accessToken);
           console.log(response);

            $scope.out=true;
            $scope.in = false;
            $scope.feed = true;

            $location.path("/myFeed");
            $scope.$apply();

         });
        } else {
         console.log('User cancelled login or did not fully authorize.');
        }
    });


};

    $scope.FBlogout = function(){
        $scope.out = false;
        $scope.in = true;
        $scope.feed = false;
        $cookies.remove("userObj");
        $cookies.remove('accessToken');
        $location.path("/");
        $scope.$apply();

};


}]);

It works here when the login function is called from the list item. The login link disappears and the logout link shows.

Navigation directive (part of main controller)

<li ng-click="FBlogin()" ng-if="in"><a href="#login">Login</a></li>
<li ng-if="feed"><a href="#myFeed">My Feed</a></li>
<li id="logout" ng-click="FBlogout()" ng-if="out"><a>Logout</a></li>

angular.module('dsnApp')
.directive('navApp', function(){
  return{
    templateUrl: 'templates/nav.html',
    controller:'mainController',
    replace: 'true'
  }
});

However when this button calls the login function the login button does not disappear and the logout does not show.

Login directive (part of main controller)

<div class="fbLogin" ng-controller="mainController">
    <h1 style="display: inline-block">Login with <span id="facebook">facebook</span></h1><br>
    <button ng-click="FBlogin()">Login</button>
</div>

    app.config(function($routeProvider) {
$routeProvider

    // route for the home page
    .when('/', {
        templateUrl : 'templates/home.html',
        controller  : 'mainController'
    })
    // route for the about page
    .when('/explore', {
        templateUrl : 'templates/explore.html',
        controller  : 'exploreController'
    })

    // route for the service page
    .when('/login', {
        templateUrl : 'templates/login.html',
        controller  : 'mainController'
    })

     // route for the about page
    .when('/myFeed', {
        templateUrl : 'templates/myFeed.html',
        controller  : 'feedController',
        authenticated : true
    })

    .otherwise('/', {
        templateUrl : 'templates/home.html',
        controller  : 'mainController'
    });

});

Does this have to do with scope at all?

The div `
` is not having the `login` and `logout` links it seems. Do you have a separate div with separate controller instance for the navigation directive? — Aruna, Dec 22 '16 at 03:56
Do you use directive ? I mean something like this one: `app.directive('loginDirective')` ? — DennyHiu, Dec 22 '16 at 04:04
@ManojLodhi: sure you can, but as the Angular FAQ states(https://docs.angularjs.org/misc/faq) "Of course, global state sucks and you should use `$rootScope` sparingly" — DennyHiu, Dec 22 '16 at 06:08
Yes, you are right, but if it is about 1-2 variables, i think we can use $rootScope instead of service. We should use $rootScope sparingly but we can use $rootScope. — Manoj Lodhi, Dec 22 '16 at 06:12
From https://docs.angularjs.org/misc/faq "If you're tempted to put a function on $rootScope, it's almost always better to put it in a service that can be injected where it's needed, and more easily tested. Conversely, don't create a service whose only purpose in life is to store and return bits of data." — Manoj Lodhi, Dec 22 '16 at 06:16
@ManojLodhi, well. I usually avoid global variable in all of my project, and use it only in extreme cases. Guess you're right, `$rootScope` is simpler in this case. As for @Olivia: you can use `$rootScope` by insert it on Dependency Injector, much like services, further read: http://stackoverflow.com/questions/18880737/how-do-i-use-rootscope-in-angular-to-store-variables — DennyHiu, Dec 22 '16 at 06:52

DennyHiu · Answer 1 · 2016-12-22T05:45:30.643

It clearly have something to do with your scope. The $scope.in must have the same scope with both $scope.FBLogin() and $scope.FBlogout().

Since you said that you're using Navigation directive, I'm guessing that you have:

a directive for navigation list, hence why your link inside this list works
another directive for login,
and a controller(mainController)

Although they're all have the same $scope as their dependency injector, their content aren't the same.

To achieve what do you want to do, you must share a variable that controls the navbar's visibility across your app (controllers and directives). Below is how you can do it, with a working example below that

 // angular app.js
 var app = angular.module('app', []);

 // main controller
 app.controller('MainController', function($scope, navbarState) {
     $scope.hide = function(){
        navbarState.hideNavbar(); // executes this when logout
     }
 });

 // navbar directive which use navbarState service
 // to show navbar, we use `ng-if` (see template)
 app.directive('navbarDirective', function(){
   return {
    restrict: 'EA',
    template: "<div ng-if=\"navbarState.currentState == 'show'\"></div>",
    controller: function ($scope, navbarState) {
      $scope.navbarState = navbarState;
    }
   }
 });

 // navbarState is a service that is shared across 
 // directives and controllers in your app.
 // this service holds a value (currentState) which indicates
 // navbar when to show or hide
 app.service('navbarState', function($window) {
    this.currentState = "show";
    this.showNavbar = function(){
       this.currentState = "show";
    }
    this.hideNavbar = function(){
       this.currentState = "hide";
    }
 });

Please see this plunkr example for detailed answer: https://plnkr.co/edit/LCS4NxJwcbfeVAXgLKJ8?p=preview

I added the nav directive. The login does not have a directive it is a route. I added more code to my initial post. — Olivia Oddo, Dec 22 '16 at 04:24
Your code doesn't work because you try to use `$scope.in` which is local variable, and only available inside directive scope. There are some ways, like `service` to circumvent this, I'll rewrite my answer soon. — DennyHiu, Dec 22 '16 at 04:32
@OliviaOddo: adding a working sample. Hope it is what you need — DennyHiu, Dec 22 '16 at 05:30

score 0 · Answer 2 · answered Dec 22 '16 at 11:44

Does this have to do with scope at all?

Yes, it very much has to do with scope.

<body ng-controller="mainController">
  <div>
      <ul class="nav">
       <li id="home"><h1><a href="#/">Do Something Nice</a></h1></li>
       <li><a href="#explore">Explore</a></li>
       <li><a href="#login">Login</a></li>
       <li><a href="#myFeed">My Feed</a></li>
       <li id="logout" ng-click="FBlogout()">   <a>Logout</a></li>
    </ul>
  </div>
   <!-- this is where content will be injected -->
   <div id="main">

<!-- angular templating -->
<!-- this is where content will be injected -->
<div ng-view></div>

The body of the app has an ng-controller directive which creates a child scope and injects the mainController.

The ng-view directive is creating another child scope and the route is instantiating another mainController on that scope.

In addition, the ng-if directive is creating yet another child scope.

To make things worse, the custom dsn-app directive is instantiating yet another mainController.

To learn about scopes, I recommend reading:

Why does ng-if only work with ng-click if they are in the same element?

2 Answers2