javascript - angularjs ng-显示 : Hide Sign-in option after successful login

Question

我试图在用户成功登录后隐藏导航栏上的登录选项。我尝试按照以下链接中说明的方式进行操作，但即使在用户登录后登录选项仍然可见。

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

如有任何帮助，我们将不胜感激。 提前致谢。

这是 application.js 和 index.html

应用程序.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>

Answer 1

您应该使用 $rootScope 来保持用户当前的登录状态。所以像这样:

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

在您的 HTML 中，只需添加 ng-show 或 ng-hide 或 ng-if 即可根据您的需要显示或隐藏元素。例如:

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

在这个例子中，该按钮将在当前用户未登录时显示，并在登录后显示当前登录的用户名。