I am currently facing an issue with updating a value on my view. Let me walk you through my code along with a brief explanation of the situation. The code may look messy as I have been experimenting with different combinations lately.
The controller in question is accCtrl:
controllers.accCtrl = function($scope, sessionFactory){
sessionFactory.isLoggedIn().then(function(data){
console.log(data.logged_in);
$scope.loggedIn = data.logged_in;
});
$scope.logOut = function(){
sessionFactory.logOutUser().then(function(data){
$scope.loggedIn = data.logged_in;
});
}
}
The console log output shows false, and the variable $scope.loggedIn controls the display of login, register, profile, and logout buttons in my HTML.
<div ng-controller="accCtrl">
{{loggedIn}}
<ul>
<li ng-hide="loggedIn">
<a href="#/login">
<b>Login</b>
</a>
</li>
<li ng-hide="loggedIn">
<a href="#/register" >
<b>Register</b>
</a>
</li>
<li ng-show="loggedIn" >
<a href="#/my_profile">
<b >My profile</b>
</a>
</li>
<li ng-show="loggedIn">
<a ng-click="logOut()">
<b>Log out</b>
</a>
</li>
</ul>
</div>
When a user tries to login by clicking the login button, the login form is shown. This functionality is handled in loginCtrl:
controllers.loginCtrl = function($scope, $http, $location, $timeout, sessionFactory){
$scope.loginUser = function () {
$http({
method: 'POST',
url: $location.protocol() + '://' + $location.host() + '/server/api/users/login',
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
data : $.param({
username : $scope.username,
password : $scope.password
})
}).success(function(data){
sessionFactory.isLoggedIn().then(function(data){
$scope.loggedIn = data.logged_in;
});
window.location.href="/#/home";
});
};
}
After a successful login, the user is redirected to the home page. However, the issue arises when the $scope.loggedIn variable in the account controller is not updated despite the console.log(data.logged_in) in loginCtrl showing true.
Logging out works fine because it calls a function within accCtrl. The problem only occurs during login since it's handled in a different controller.
Below is my sessionFactory for reference:
app.factory('sessionFactory', ['$http', '$location', function($http, $location){
var factory = {};
factory.logOutUser = function(){
return $http({
method: 'GET',
url: $location.protocol() + '://' + $location.host() + '/server/api/users/logout'
}).then(function successCallback(response){
return response.data;
},function errorCallback(response) {
console.log('error logging out: ' + response);
});
}
factory.isLoggedIn = function(){
return $http({
method: 'GET',
url: $location.protocol() + '://' + $location.host() + '/server/api/users/isLoggedIn'
}).then(function successCallback(response){
console.log(response.data);
return response.data;
},function errorCallback(response) {
console.log('Checking login failed: ' + response);
});
}
return factory;
}]);
Here's a snippet from my app.js file:
var app = angular.module('app', ['ngRoute', 'ngAnimate', 'ui.sortable', 'ngFileUpload'])
app.config(function($routeProvider){
$routeProvider.
when('/', {controller:'homeCtrl', templateUrl:'app/templates/home.html'}).
(other routes listed here...)
});
I believe I need to implement some sort of watch or similar function, but I'm unsure how to proceed. Any help would be greatly appreciated.
TLTR
When a user logs in using loginCtrl, I need to update the $scope.loggedIn value in accCtrl.
If more information is needed, please let me know.