加载前的AngularJS ng-switch答案

【问题标题】：AngularJS ng-switch before load加载前的AngularJS ng-switch
【发布时间】：2014-05-09 09:39:29
【问题描述】：

我有一个 AngularJS 模板，如下所示：

<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>

我的控制器和工厂如下所示：

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();
}]);

有没有办法防止“无可用数据”。在从资源中检索数据之前快速在屏幕上闪烁？

【问题讨论】：

标签： javascript angularjs ngresource

【解决方案1】：

出现这种情况的原因是因为 $resource 服务返回一个空对象，该对象在获取到请求的数据后会异步填充。

解决这个问题：

从非 $scope 变量分配请求的数据。
在query() 操作中创建函数回调。
在 步骤 2 中创建的函数回调中分配 $scope.data 中的非 $scope 变量。

例如

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

你可能会看到其他examples in here。

【讨论】：

【解决方案2】：

在父元素上使用 ng-cloak。

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

AngularJS ng-cloak

【讨论】：