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

Question

这是对我的previous AngularJS question 的跟进。

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

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

$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 的当前值记录到控制台。这只是为了检查；它具有更新视图的副作用。

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

谢谢！

Answer 1

我发现你可以将$rootScope 传递给服务，然后在上面调用$apply。所以当你想更新你的视图时，你只需$rootScope.$apply()。

这里是更新的 JSFiddle：http://jsfiddle.net/Qcz5Y/11/

Answer 2

实际上模拟 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 重新绘制。由于您尝试使用需要调用 $apply 的 setTimout，因此您遇到了问题。