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

admin管理员组

文章数量:1346672

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.

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'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./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>

• javascript
• html
• angularjs
• twitter-bootstrap

Share Improve this question Follow edited Jun 29, 2015 at 14:48 Siguza 24k66 gold badges5555 silver badges9898 bronze badges asked May 19, 2014 at 12:06 user3651643user3651643 4111 gold badge11 silver badge44 bronze badges 1

• I remend adding plunker... – Sten Muchow Commented May 19, 2014 at 13:24

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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 es 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.

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

本文标签： javascriptangularjs ngshow Hide Signin option after successful loginStack Overflow