angularjs ng-show:成功登录后隐藏登录选项

Question

我试图在用户成功登录后隐藏导航栏上的"登录"选项.我尝试按照以下链接中解释的方式执行此操作,但即使用户登录后,登录选项仍然可见.

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

任何帮助将不胜感激.提前致谢.

这是application.js和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>

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>

在此示例中,该按钮将在当前用户未登录时显示,并在登录后显示当前登录的用户名.