AngularJS ng-switch before load

Question

I have an AngularJS template that looks like this:

<table data-ng-switch data-on="data.length">
    <tbody data-ng-switch-when="0">
        <tr>
            <td>No data available.</td>
        </tr>
    </tbody>
    <tbody data-ng-switch-default>
        <tr data-ng-repeat="row in data">
            <td>{{row.name}}</td>
        </tr>
    </tbody>
</table>

My controller and factory look like this:

demo.factory('Demo', function($resource) {
    return $resource('data.json');
});

demo.controller('DemoController', ['$scope', '$state', '$stateParams', 'Demo', function($scope, $state, $stateParams, Demo) {   
    $scope.data = Demo.query();
}]);

Is there a way to prevent "No data available." from flashing on the screen quickly before the data is retrieved from the resource?

score 0 · Answer 1 · answered May 09 '14 at 01:32

0

Use ng-cloak on the parent element.

<div ng-cloak>
    :: all the bindings that you want to wait for the bind to hapen
</div>

AngularJS ng-cloak

answered May 09 '14 at 01:32

VtoCorleone

16,813
5
37
51

score 0 · Accepted Answer · answered May 09 '14 at 01:39

The reason this is happening is because the $resource service returns an empty object that is asynchronously filled after the requested data is obtained.

To solve this:

Assign the requested data from a non $scope variable.
Create a function callback in the query() action.
Assign the non $scope variable in $scope.data within the function callback created in step 2.

e.g.

demo.controller('DemoController', ['$scope', '$state', '$stateParams', 'Demo', function($scope, $state, $stateParams, Demo) {   
    var queryData = Demo.query(function() {
      $scope.data = queryData;
    })
}]);

you may see other examples in here.

AngularJS ng-switch before load

2 Answers2