How to ng-hide login button after successful login Ionic? - angularjs

Question

I have started sideMenu app in ionic and tried some implementation. Initially, ionicModal is used to show login so i change it with ion-list item like;
<ion-side-menu side="left" >
<ion-header-bar class="bar-stable bar-dark">
<a ng-click="redirectToWeb()" > <h1 class="title">NerdApp</h1></a>
</ion-header-bar>
<ion-content >
<ion-list class="BGcolorDG">
<ion-item nav-clear menu-close class="BGcolorDG item item-icon-left item-content-modified" href="#/app/login" ng-show="control.showLogin" > <!--ng-click="login()" -->
<i class="icon ion-locked"></i> <span>Login</span>
</ion-item>
<ion-item nav-clear menu-close href="#/app/search" class="item item-icon-left BGcolorDG item-content-modified">
<i class="icon ion-search"></i><span>Search</span>
</ion-item>
<ion-item nav-clear menu-close href="#/app/browse" class="item item-icon-left BGcolorDG item-content-modified">
<i class="icon ion-ios-browsers"></i><span>Browse</span>
</ion-item>
<ion-item nav-clear menu-close href="#/app/playlists" class="item item-icon-left BGcolorDG item-content-modified">
<i class="icon ion-music-note"></i> <span>Playlists</span>
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
and provide routeState as
state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/menu.html",
controller: 'AppCtrl'
})
.state('app.login', {
url: "/login",
views: {
'menuContent': {
templateUrl: "templates/login.html",
controller: "LoginCtrl"
}
}
})
.state('app.home', {
url: "/home",
views: {
'menuContent': {
templateUrl: "templates/home.html",
controller: "HomeCtrl"
}
}
})
And default route to home controller.
$urlRouterProvider.otherwise('/app/home');
the app controller is as
.controller('AppCtrl', function($scope,$timeout,$location,$rootScope) {
$scope.control = {
showLogin:true
};
if($rootScope.showLogin != undefined && $rootScope.showLogin == false){
$scope.control.showLogin = false;
}
})
Inside loginControl i am checking and redirecting it back to home controller as
$scope.login = function() {
if ($scope.loginData.username == 'hassaan' && $scope.loginData.password == 'khan') {
$rootScope.showLogin = false;
// $location.path('#/app');
$state.go('app.home');
}else{
alert('Incorrect credentials');
}
}
i have tried both $location.path and $state.go and what its doing is redirecting to home page but 'not showing the sidemenu' and when i inspect in browser it showing sidemenu hidden.
The flow images of test app is as

Answer 1

Try use $rootScope
pass it to AppCtrl
.controller('AppCtrl', function (...., $rootScope) {
// and then
$rootScope.control = {
showProfile: false
};
after success authentication - make it true
$rootScope.control = {
showProfile: true
};
now it should work as you expected

Answer 2

Don't use $rootscop if you dont need to.
You can send variables to other controllers with the router from angular using params.
.state('menu.employeeInfo', {
url: '/employeeInfo',
views: {
'side-menu21': {
templateUrl: 'templates/employeeInfo.html',
controller: 'employeeInfoCtrl'
}
},
params: {
appointmentObj: null,
subassignmentObj: null
}
})
You can then pass these vars in the following manner.
$scope.gotoAppointment = function (Appointment, Subassignment) {
$state.go('menu.employeeInfo', { appointmentObj: Appointment, subassignmentObj: Subassignment }, { reload: true });
}