如何在AngularJS中等待状态变化?

时间:2013-12-05 20:34:31

标签: javascript ajax json angularjs angularjs-resource

使用Angular 1.2.3,我有这样的服务:

var itemService = function ($resource) {
    return $resource('/rest/item', {action: ''}, {
        query: {method: 'GET'}
    });
};
services.factory('Item', ['$resource', itemService]);

在我的控制器中,我想保存一个项目,所以我做

$scope.item = Item.query(); // this returns 1 item
$scope.puppet.$save(); // this results in the desired POST on my service

POST处理程序生成的图像可能需要一段时间。我知道$ save调用立即返回,因为调用是异步的。 一旦POST处理程序完成,它就会返回一个带有布尔calculateDone = true的Item,这反映在$ scope中。

<div ng-show="item.calculationsDone"><img ng-src="{{src/of/image.jpg}}"/></div>

现在我要显示生成的图像。我正在使用上面的HTML。我已经知道生成的图像的URL了,但我不能把它放在ng-src中,因为它还没有解决。

如果项目状态发生变化,如何更新或重新应用ng-src?

我需要使用承诺吗?还是$ watch?

1 个答案:

答案 0 :(得分:1)

这样的事情怎么样?

$scope.imageSrc = "";
scope.puppet.$save(function(value, responseHeaders) {
 $scope.imageSrc = "src/of/image.jpg";
})

<img ng-src="{{imageSrc}}"/>

我猜的另一个选项是图像元素的ng-if =“item.calculationsDone”。 一旦表达式求值为true,img元素就会附加到DOM。 在此之前,它不是DOM的一部分 - &gt;图像也将无法加载。