javascript - 加载前的AngularJS ng-switch

Question

我有一个 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();
}]);

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

Answer 1

在父元素上使用 ng-cloak。

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

AngularJS ng-cloak

Answer 2

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

要解决这个问题：

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

例如

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

您可能会在此处看到其他示例。