AngularJS-如何从图像对象创建延迟对象

AngularJS - how to create deferred object from image object

本文关键字：对象 创建 延迟 图像 AngularJS-      更新时间：2023-09-26

我正试图从简单的图像对象创建中创建一个延迟对象，如下所示：

var image = new Image();
image.src = 'some url';
image.onload = function() {
   // some code
}

现在。。。如何在AngularJS中使用$q库创建延迟对象？有可能吗？

我假设有一个工厂，您正计划将这个函数放在那里。然后：

.factory('utils', function($q) {
    return {
        createImage: function(src) {
            var deferred = $q.defer(),
                image = new Image();
            image.onload = function() {
                deferred.resolve(image);
            };
            image.src = src;
            return deferred.promise;
        }
    };
});

然后你会像往常一样使用它：

utils.createImage('/assets/images/big-logo.png').then(function(imgObj) {
    console.log(imgObj);
});

Angular 1.3。由于Angular 1.3版本承诺服务$q也允许类似于原生Promise构造函数的新语法。然后可以重写上述函数：

createImage: function(src) {
    return $q(function(resolve, reject) {
        var image = new Image();
        image.onload = function() {
            resolve(image);
        };
        image.src = src;
    });
}

您可以将这两个版本与1.3一起使用。

最后是简单的演示：http://plnkr.co/edit/MbQEDPHoAurFd6JwHTji?p=preview

相关文章：