Angular JS自定义指令在iOS设备上不起作用

Question

我已经在Azure上部署了应用程序，并且具有C＃后端和AngularJS前端。 我正在使用自定义指令（称为bgSrc ），该指令根据给定的url（ background-image或src ）来设置图像源，具体取决于使用该指令的元素。

这是指令：

app.directive('bgSrc', ['preloadService', function (preloadService) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {

            element.hide();

            preloadService(attrs.bgSrc).then(function (url) {
                if (element[0].tagName === 'DIV' || element[0].tagName === 'MD-CONTENT' || element[0].tagName === 'MAIN' || element[0].tagName  === 'FORM') {
                    element.css({
                        "background-image": "url('" + url + "')"
                    });
                    element.fadeIn();
                }
                else if (element[0].tagName === 'IMG') {
                    attrs.$set('src', url);
                    element.css({
                        'display': 'block'
                    });
                    element.fadeIn();
                }
            });
        }
    };
}]);

这是我的preloadService：

app.factory('preloadService', ['$q', '$rootScope', function ($q, $rootScope) {
    return function preload(url) {
        var deffered = $q.defer(),
            image = new Image();

        image.src = url;

        if (image.complete) {

            deffered.resolve(image.src);
            $rootScope.loading = false;

        } else {
            $rootScope.loading = true;

            image.addEventListener('load', function () {
                deffered.resolve(image.src);
                $rootScope.loading = false;
            });

            image.addEventListener('error', function () {
                deffered.reject();
                $rootScope.loading = true;
            });
        }

        return deffered.promise;
    };
}]);

这是我如何在html上使用它的示例。

<div ng-if="!loading" bg-src="assets/build/img/ocean_bg.png">
    <form name="model.form" ng-submit="login()" bg-src="assets/build/img/scroll.png">
        <h1>Log In</h1>
        ...
    </form>
</div>

它可以在Chrome和Android上完美运行，但在iOS设备上仍会失败。 我已将问题精确定位为我的自定义指令，如果我将其删除，则页面可以正常加载；如果包含它，则页面将陷入无尽循环，无法加载我的图像，并停留在“ $rootScope.loading ”状态，该状态仅显示圆形进度条。

对此事的任何帮助，我们将不胜感激

Answer 1

问题出在我的preloadeService中，其中图像的加载陷入了无限循环。