[英]Angular.js Controller is Loading after the view
在这里,我试图返回接收到的每个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
方法在getColour
函数完成后异步执行getHandler
函数,因此它无法返回值,但可以解析延迟对象。
使用ng-init
来获取URL并将其附加到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。
避免在插值{{ }}
使用异步函数,因为每个摘要周期都会多次调用异步函数。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.