angularjs ng-show: Hide Sign-in option after successful login

Question

I'm trying to hide the Sign-In option on the navigation bar once the user logs in successfully. I tried to do it the way explained in the following link, but the Sign-in option is still visible even after the user logs in.

http://stackoverflow.com/questions/22694536/angularjs-ng-hide-with-different-ng-controller

Any help would be greatly appreciated. Thanks in advance.

Here is the application.js and index.html

application.js

myApp.controller('NavbarController', [
'$scope',
'$location',
'$modal',
'$rootScope',
'navservice',
'$window',
function ($scope, $location, $modal, $rootScope, navservice, $window) {

init();

function init() {
    navservice.hideSignIn($scope, $location);
};

    $scope.doCollapse = function() {
       $scope.isCollapsed=!$scope.isCollapsed;
    };

    $scope.$on('EventFromSigninController',function(data){
        $scope.signedin = data.signedin;
});
}, 
]);

myApp.service('navservice', function () {
        this.hideSignIn = function ($scope, $location) {
        if (null != username && 0 != username.length && 
                     null != password &&  0 != password.length) {
            $scope.signedin = true;
        } else {
            $scope.signedin = false;
        }
    };
});

  myApp.controller('SignInController', [
   '$scope',
   '$modal',
   'navservice',
   '$window',
    function ($scope, $modal, navservice, $window) {
  var signedIn2 = true; 
  $scope.dblclick = function() {
   //change the local tableHideAlias state
   signedIn2 = !signedIn2;

   // emit the new hideAlias value
   $scope.$emit('EventFromSigninController',{signedIn: signedIn2}); 
  };      
     },
   ]);

index.html

<nav class="hidden-xs" role="navigation">
<ul class="nav navbar-nav" data-ng-controller="NavbarController">
<a href="#/home" role="button" class="navbar-brand navbar-band-pad">
<img src="img/sampleimg.png" alt="logo"> 
</a>


<li data-ng-class="{'active':getClass('/home')}"><a href="#/">Home</a></li>
<li class="dropdown">
<a href="#" role="button" class="dropdown-toggle">
Accounts <b class="caret"></b>
</a>

<ul class="dropdown-menu">
<li><a ng-click="signOut()">Sign Out</a></li>
</ul>
</li>
</ul>

<ul class="nav navbar-nav navbar-right" data-ng-controller="NavbarController"  ng-   hide="signedin">                          
<li id="signinele" data-ng-class="{'active':getClass('/signin')}" data-ng-  controller="SignInController" ng-dbclick="dblclick()"> 
<a href="#/signin">Sign In</a>
</li>                                                                         
</ul>                                                             
</nav>

I recommend adding plunker... – Sten Muchow May 19 '14 at 13:24 — Sten Muchow, May 19 '14 at 13:24

score 6 · Answer 1 · answered May 20 '14 at 12:19

You should use $rootScope to keep user's current login state. So something like:

function login(){
    var onSuccessCallback = function(data) {
        $rootScope.currentUserSignedIn = true;
        $rootScope.currentUser.name = data.name;
    };
    // Login function to the server comes here
}

On your HTML just add ng-show or ng-hide or ng-if to show or hide the element depending on your need. For example:

<nav>
    <a ng-click="login()" ng-hide="currentUserSignedIn">Sign in</a>
    <span ng-show="currentUserSignedIn">{{currentUser.name}}</span>
</nav>

On this example, the button will show when current user has not signed in and show current logged in user name after sign in.

You need to use `$root.currentUserSignedIn` to refer to variable defined in the root scope — wal, Nov 11 '14 at 11:43

score 1 · Answer 2 · answered May 19 '14 at 14:48

First,the way you write your service is wrong.It should like:

myApp.service('myService', function ($location,$http) {
    .......
});

Second,you can't inject "$scope" into a service, it should get an error. The reason is that your service could be used by many controller, then which $scope should be used?

Here's what I will do,write this in your controller

  $scope.$on('Login',function(){$scope.login=true});
  $scope.$on('unLogin',function(){$scope.login=false});

And write your Sign-In link like this:

<a ng-hide="login" href="#/signin">Sign In</a>

The default situation is:

function mainCtrl(){
   $scope.$emit('unLogin')
   ........
}

And then in the situations you want to hide it:

function mainCtrl(){
    $scope.$emit('unLogin')
       ........
    function Login(){
        ..........
        $scope.$emit('Login')
    }
}

This should help

angularjs ng-show: Hide Sign-in option after successful login

2 Answers2