Struggling to grasp the inner workings of Angularfire in this particular scenario. On my "webapp/test" page, I have two controllers - one for user login and another for displaying profile information. When a user logs in with Facebook, I use their unique "uid" to query the firebase database for their information.
The issue arises because the database read operation is asynchronous, preventing me from updating the view. Even using $scope.$apply() only functions until I navigate to a page with a different controller, resulting in the following error:
Error: [$rootScope:inprog] http://errors.angularjs.org/1.3.15/$rootScope/inprog?p0=%24digest
Controller
app.controller("profile", function($scope, loginService, Auth, userManagement) {
var authData = Auth.$getAuth();
if (authData != null) {
$scope.authData = authData;
userManagement.saveLastLogin(authData);
userManagement.userDatabaseRead(authData).done(function(userDatabase) {
$scope.userDatabase = userDatabase;
$scope.$apply();
});
};
$scope.logoutFB = function() {
loginService.logoutUser();
Auth.$onAuth(function(authData) {
$scope.authData = authData;
});
};
})
Factory
app.factory("userManagement",function(FirebaseUrl) {
return {
saveLastLogin: function(authData) {
var userId = authData.uid;
var ref = new Firebase(FirebaseUrl);
var users = ref.child("users");
var timestamp = Date.now();
users.child(authData.uid).update({
last_activity: timestamp,
});
console.log('user ' + userId + ' last login was on' + timestamp);
},
userDatabaseRead: function(authData) {
var ref = new Firebase(FirebaseUrl+"users/"+authData.uid);
var data, def = $.Deferred();
ref.on("value", function(snapshot) {
var userDatabase = snapshot.val();
def.resolve(userDatabase);
}, function (errorObject) {
console.log("The read failed: " + errorObject.code);
});
return def.promise();
},
}
});
Update 1: View
This is my view, what i am trying to do is once the user is logged in, show some information from the firebase structure that belongs to this user uid
<div class="jumbotron">
<h1>Profile View</h1>
<p ng-show="authData">Welcome {{ authData.facebook.cachedUserProfile.first_name }}</p>
<p ng-show="authData">{{userDatabase.last_activity | date:'yyyy-MM-dd HH:mm:ss Z'}}</p>
<button ng-click="logoutFB()" ng-show="authData" class="btn btn-danger facebook-login">Logout</button>
</div>