Utilizing Firebase for authentication in my web app, I have implemented buttons on various pages that should only be visible when the admin is logged in. Despite using ng-if to display the button if 'loggedin' equals true, the buttons refuse to appear even though console logging confirms 'loggedin' is changing correctly.
I'm at a loss as to what could be causing this issue. While consulting the Angular docs and exploring $scope, ngIf, and ngShow directives, I haven't been able to find a solution. I even referred to this StackOverflow post, where others seemed to have success with the same process. Unfortunately, it's not working for me.
Below is a snippet of the controller code:
app.controller('welcomeCtrl', function ($scope, welcomeData, $routeParams, $location) {
var ref = new Firebase('https://mywebapp.firebaseio.com/');
//authentication check
var auth = new FirebaseSimpleLogin(ref, function (error, user) {
if (error) {
// an error occurred while attempting login
console.log(error);
}
// no user logged in
else if (user === null) {
console.log("Not logged in");
}
// normal user logged in
else if (user.id !== "47f0b82c-59d2-4bcd-8arc-ecb438eb0163") {
console.log("You are logged in as normal user");
}
// admin logged in
else {
console.log("Logged in as admin");
$scope.loggedin = true;
console.log("logging the scope.loggedin as admin " + $scope.loggedin);
}
});
$scope.loggedin = false;
console.log("logging scope.loggedin " + $scope.loggedin);
var authCheck = function () {
console.log("logging the scope in authCheck " + $scope.loggedin);
return auth.user !== null;
};
authCheck();
The following HTML element does not update accordingly:
<div ng-show="loggedin">
<a class="btn waves-effect waves-red" ng-href="/#/editWelcome/{{welcome._id}}">Update
</a>
</div>
If anyone has any suggestions or insights into what I might be missing or doing wrong, I would greatly appreciate any help. Thank you!