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
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>
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 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:
<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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With