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>

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

Answer 2

首先，你编写服务的方式是错误的。它应该：

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

其次，你不能将“$ scope”注入服务，它应该会出错。原因是许多控制器可以使用您的服务，那么应该使用哪个$ scope？

这是我要做的，在你的控制器中写下

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

并写下您的登录链接：

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

默认情况是：

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

然后在你要隐藏它的情况下：

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

这应该有帮助

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

2 个答案: