0

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 ハンドラーが完了するとすぐに、ブール値のcalculationDone = true を持つアイテムが返されます。これは $scope に反映されます。

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

次に、生成された画像を表示します。上記のhtmlを使用しています。生成された画像への URL は既にわかっていますが、まだ解決されていないため、ng-src に入れることはできません。

アイテムの状態が変化したらすぐに ng-src を更新または再適用するにはどうすればよいですか?

promise を使用する必要がありますか? それとも$watch？

4

1 に答える 1

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 の一部ではありません -> 画像も読み込まれません。

于 2013-12-05T21:40:08.040 に答える