Arthur Frankel Arthur Frankel - 23 days ago 11
AngularJS Question

Wait until scope variable is loaded before using it in the view in angular.js

I've seen this and this but it seems like there might be a simpler way.

In my view I have several menu options that are controlled through permissioning - i.e., not everyone can see a "Dashboard" view. So in my menu option in my view I have something like the following:

<li ng-show="validatePermission('Dashboard')">Dashboard</li>


In my controller I have a validatePermission method defined where it is looking at the permissions of the current user. For example:

$scope.validatePermission = function(objectName) {
if $scope.allPermissions......


Also in my controller I'm loading those permissions via an $http call:

$http.get('permissions/' + userid + '.json').success(function(data) {
$scope.allPermissions = data;....


The issue is that $scope.allPermissions doesn't get loaded before the view makes the call to validatePermission. How can I wait for allPermissions to be loaded before the view renders?

Answer

Have the validatedPermission function return false when allPermissions hasn't been loaded. That way the element with your ng-show won't be displayed until allPermissions has been loaded.

Alternatively, put an ng-show="allPermissions" on the enclosing <ul> or <ol>.