当视图在AngularJS中返回时，我如何获得异步服务调用来更新视图

How can I get an asynchronous service call to update the view when it returns in AngularJS?

本文关键字：服务 异步 何获得 调用 新视图 更新 AngularJS 视图 返回      更新时间：2023-09-26

这是我上一个AngularJS问题的后续。

我正在尝试复制本视频教程中提到的$resource服务的功能：链接。

在本教程中，您可以使用异步调用更新范围变量及其视图。首先，这里是设置的资源：

$scope.twitter = $resource('http://twitter.com/:action',
    {action: 'search.json', q: 'angularjs', callback: 'JSON_CALLBACK'},
    {get: {method: 'JSONP'}});

然后在资源上调用get函数以进行ajax调用并更新必要的范围变量：

$scope.twitterResult = $scope.twitter.get();

这里发生的是$scope.twitter.get()立即返回一个空对象引用。然后，当ajax请求返回时，将使用来自Twitter的数据更新该对象。然后，该视图将更新所有｛｛twitterResult｝｝实例，您将看到返回的数据。

我不知道的是，当对象在异步回调中更新时，作用域如何知道值已经更改？

我不这么认为——回调必须在作用域上调用某种更新函数，对吧？但如果是这样的话，这是怎么做到的呢？我听说过一个名为$apply的函数，它可能是答案——但如何引用$scope呢$来自资源内部的apply（）？

我创建了一个JSFiddle来说明这个问题：http://jsfiddle.net/Qcz5Y/10/

（编辑：下面是一个新的JSFiddle，它使用不同的异步调用来说明使用ajax调用而不是setTimeout的问题：http://jsfiddle.net/Qcz5Y/14/)

在本例中，您将看到一个控制器和一个资源。控制器的作用域有一个属性fruit，它从一个对象开始设置。当您单击"获取新水果"时，该属性设置为fruitResource.get()，它会立即返回一个空对象。然后它进行异步调用，最后执行一个回调，更新最初返回的对象的值。

当这种情况发生时，$scope.fruit的值将正确更新为回调中设置的值。但这并没有反映在视图中。

如果您点击"打印当前水果"，它会将$scope.fruit的当前值记录到控制台。这只是为了检查；它有更新视图的副作用。

我觉得我需要做一些类似$scope的事情$apply（）位于get_callback函数的底部（您将在代码中看到它）。这样做对吗？如果是，如何在fruitResource中获得对$scope的引用？我知道我可能可以将$scope作为参数传递到fruitResource.get()中，然后以这种方式引用它，但上面提到的示例中的$resource.get（）函数不需要这样做，所以我希望AngularJS提供一些方法来自动从服务中获取作用域。

谢谢！

我发现可以将$rootScope传递到服务中，然后在此基础上调用$apply。因此，当您想要更新视图时，只需执行$rootScope.$apply()即可。

以下是更新后的JSFiddle：http://jsfiddle.net/Qcz5Y/11/

实际上模拟Resource的行为非常简单，可以归结为执行异步调用并立即返回空结果。然后，当数据确实从服务器到达时，需要更新返回的引用。以下是使用您的用例的示例：

   get: function() {
        var fruit = {};
        // Asynchronous call that executes a callback. Simulation of ajax/db request            
        $timeout(function() {
            fruit.type = ['banana', 'strawberry', 'watermellon', 'grape'][Math.floor(Math.random() * 4)];
            fruit.count = [1, 2, 3, 4][Math.floor(Math.random() * 4)];
        }, 2000);
        return fruit;
    }

以下是完整的jsFiddle：http://jsfiddle.net/pkozlowski_opensource/sBgAT/1/

请注意，我使用angular的$timeout服务来模拟异步调用，因为$timeout将负责在需要时调用$apply，从而在没有任何手动干预的情况下触发UI重新绘制。您在尝试使用setTimout时遇到了一些问题，需要调用$apply。

相关文章：