AngularJS - 在多个资源加载后运行代码

Question

我想从后端加载资源后执行一些代码.我能够通过在一个资源请求上使用回调来做到这一点,如下所示:

$scope.resrc = Resrc.query({idResource: 1}, function(){
    //CODE AFTER RESOURCE IS LOADED
});

但是尝试使用$ q等待MULTIPLE资源加载然后执行代码对我来说不起作用!(正如他们在这里建议的那样/sf/answers/1018206241/)

$q.all([
        $scope.services = Services.query({idResource: 1}),
        $scope.brands = Brands.query({idResource: 1})
    ]).then(function() { 
        //CODE AFTER RESOURCES ARE LOADED 
});

我究竟做错了什么？

Answer 1

来自Angular文档

重要的是要意识到调用$ resource对象方法会立即返回一个空引用(取决于isArray的对象或数组).从服务器返回数据后,将使用实际数据填充现有引用.这是一个有用的技巧,因为通常将资源分配给模型,然后由视图呈现.具有空对象导致无渲染,一旦数据从服务器到达,则对象用数据填充,并且视图自动重新呈现其自身显示新数据.这意味着在大多数情况下,永远不必为动作方法编写回调函数.

这里的关键点是,你传递的对象不是承诺.

承诺是一种表示你正在等待某事先完成的方式.它是ajax的支柱,如果您不熟悉,我建议您阅读它.

要使$ q工作,您需要提供承诺而不是对象或引用

来自相同的文档

Resource实例和集合具有以下附加属性:

$ promise:创建此实例或集合的原始服务器交互的承诺.

成功时,使用相同的资源实例或集合对象解析promise,并使用来自服务器的数据进行更新.这使得在$ routeProvider.when()的resolve部分中使用它很容易推迟视图呈现,直到加载资源.

失败时,使用http响应对象解析promise,而不使用resource属性.

$ resolved:在完成第一次服务器交互(成功或拒绝)后为true,之前为false.了解资源是否已解析在数据绑定中非常有用.

所以你需要做类似的事情

$scope.services = Services.query({idResource: 1});
$scope.brands = Brands.query({idResource: 1});

$q.all([
    $scope.services.$promise,
    $scope.brands.$promise
]).then(function() { 
    //CODE AFTER RESOURCES ARE LOADED 
});