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

Question

这是我之前的AngularJS问题的后续内容.

我正在尝试复制本视频教程中提到的$ 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.这只是为了检查; 它有更新视图的副作用.

我觉得我需要做一些像$ scope这样的东西.$ apply()在get_callback函数的底部(你会在代码中看到它).这是正确的做法吗？如果是这样,我如何获得fruitResource中$ scope的引用？我知道我大概可以传递$scope到fruitResource.get()作为参数,然后引用它这种方式,但在顶部提到的例子中,$ resource.get()函数并不需要做到这一点,所以我希望AngularJS提供了一些方法从服务中自动获取范围.

谢谢!

Answer 1

我发现你可以$rootScope进入服务然后再打电话$apply.因此,当您想要更新视图时,您就可以了$rootScope.$apply().

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