I am facing an issue with displaying the admin status at the top of all pages for a user who successfully logs in as an admin. Here is my code snippet:
<!-- nav bar -->
<div>
<span ng-show="$root.isAdmin">(ADMIN)</span>
</div>
Although I set $rootScope.isAdmin = true; in one controller, when accessing it in another controller, it returns undefined. I have researched similar topics but found no solution that applies to my case.
One suggested solution is to use a service to hold shared data instead of relying on $rootScope. However, this would require injecting the service into each controller where the admin status needs to be displayed:
app.controller('...', ['$scope', 'checkAdminService', function($scope, checkAdminService) {
$scope.isAdmin = checkAdminService.getIsAdmin()
}]);
Then the HTML code would look like this:
<span ng-show="isAdmin">(ADMIN)</span>
Is this approach acceptable or more cumbersome? And why does the $rootScope solution fail to work as expected in my scenario?