在这里，我试图返回接收到的每个id的url，但是该url是异步生成的，因此生成它需要花费一些时间，因此无法将其放入视图中。我如何让它等到从PouchDB提取数据并生成Url
控制器
$scope.getColour = function(id) {
var texture_array = [];
texture_array = photoList.data.economy.concat(photoList.data.luxury, photoList.data.premium);
var db = PouchDB('new_test4');
var obj = {};
var array = [];
var i;
// console.log(texture_array.length)
for (i = 0; i < texture_array.length; i++) {
//var id = texture_array[i].image_url;
if (texture_array[i].image_url == id) {
db.getAttachment(id, id, function(err, blob_buffer) {
if (err) {
return console.log(err);
} else {
var url = URL.createObjectURL(blob_buffer);
console.log(url);
return url;
}
});
}
}
};
html
<div class="item" ng-repeat="photoOuterObj in remainingEconomyColour " ng-class=" $index? '' : 'active'">
<div class="row" ng-repeat="photoInnerObj in photoOuterObj">
<div class="premium-carousel-image">
<a class="color-image"> <img src="{{getColour(photoInnerObj.image_url)}}" alt="Image" /></a>
<div class="ambience-button">
</div>
</div>
</div>
</div>
转换getColor函数以返回promise：
$scope.getColourPromise = function(id) {
var texture_array = [];
texture_array = photoList.data.economy.concat(photoList.data.luxury, photoList.data.premium);
var db = PouchDB('new_test4');
var obj = {};
var array = [];
var i;
//Create deferred object
var defer = $q.defer();
// console.log(texture_array.length)
for (i = 0; i < texture_array.length; i++) {
//var id = texture_array[i].image_url;
if (texture_array[i].image_url == id) {
db.getAttachment(id, id, function handler(err, blob_buffer) {
if (err) {
//return console.log(err);
//reject on error
defer.reject("db ERROR "+err);
} else {
var url = URL.createObjectURL(blob_buffer);
console.log(url);
//resolve with url;
defer.resolve(url);
}
});
}
}
//return promise
return defer.promise;
};
由于该getAttachment方法在函数完成后getHandler异步执行该函数，因此它无法返回值，但可以解析延迟对象。getColour
使用ng-init以获取网址，并附上它的ng-repeat迭代器对象：
<div class="row" ng-repeat="innerObj in photoOuterObj">
<!-- use ng-init to do the fetch -->
<div ng-init="innerObj.urlObj = fetchURL(innerObj)">
<a class="color-image"> <img ng-src="{{innerObj.urlObj.url}}" alt="Image" /></a>
<div class="ambience-button">
</div>
</div>
</div>
提取功能：
$scope.fetchURL = function(itemObj) {
var urlObj = {};
urlObj.url = "default.jpg";
var promise = $scope.getColourPromise(itemObj.image_url);
promise.then(function (url) {
urlObj.url = url;
});
return urlObj;
});
最初，访存将返回一个url属性设置为默认值的对象。承诺解决后，它将被设置为获取的值。观察者创建的双花括号{{ }}表达式将更新DOM。
避免在插值中使用异步函数，{{ }}因为每个摘要循环都会多次调用异步函数。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句