I am currently learning Angular (version 1) and facing an issue with my layout. I need to dynamically change the navigation based on the type of user that is logged in. To achieve this, I make an API request when the page loads to fetch the user object data, which will be shared with other controllers on the page.
Here is my DashboardController:
app.controller('DashboardController', function($scope, UserService, $rootScope){
$scope.loading = true;
if($scope.loading) {
$scope.doInitialisation
}
$scope.isSuper = function() {
if($scope.user.isSuper == 1) {
return true;
}
return false;
}
UserService.authenticatedUser()
.then(function(response){
$scope.loading = false;
$rootScope.user = response.message;
}, function(error) {
$scope.hasError = true;
$scope.errors = error.message;
});
});
In my template, I'm attempting to display a UL element based on the user type:
<ul ng-if="isSuper()" ng-include="dashboard/nav/super.html" id="sidebar-menu" class="sf-js-enabled sf-arrows">
</ul><!-- #sidebar-menu -->
However, I encounter the following error:
Cannot read property 'isSuper' of undefined
I suspect this error occurs because isSuper() is fired before my AJAX request has completed loading. Is there a way to resolve this? Can I move the logic from the template to the AJAX success callback?
Any suggestions for a more efficient approach?