twitter-bootstrap angularjs ng-show：成功登录后隐藏登录选项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23737327/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
angularjs ng-show: Hide Sign-in option after successful login
提问by user3651643
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 和 index.html
application.js
应用程序.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
索引.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>
回答by Bram E Pramono
You should use $rootScope to keep user's current login state. So something like:
您应该使用 $rootScope 来保持用户当前的登录状态。所以像：
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:
在您的 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>
On this example, the button will show when current user has not signed in and show current logged in user name after sign in.
在此示例中，该按钮将在当前用户尚未登录时显示，并在登录后显示当前登录的用户名。
回答by user3125499
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?
其次，您不能将 "$scope" 注入服务，它应该会出错。原因是你的服务可以被多个控制器使用，那么应该使用哪个 $scope ？
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
这应该有帮助
