Question

我正在制作一个自定义指令，用于在状态（ui-router正在更改时）预加载图像，以便在导航到新状态之前解析数据和内容。

我在这里创建了一个Pen：https://codepen.io/wons88/pen/NgbNvO以使用bgSrc指令显示我的基本实现：

app.directive('bgSrc', ['preloadService', function (preloadService) {
    return function (scope, element, attrs) {
        element.hide();

        preloadService(attrs.bgSrc).then(function () {
            console.log(element.css);
            element.css({
                "background-image": "url('" + attrs.bgSrc + "')"
            });
            element.fadeIn();
        });
    }
}]);

和preloadService：

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

        image.src = url;

        if (image.complete) {
            $rootScope.loading = false;
            deffered.resolve();

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

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

        return deffered.promise;
    };
}]);

HTML：

<div bg-src="https://images5.alphacoders.com/446/thumb-1920-446028.jpg">Background img should show up...</div>

修改问题是即使加载图像也不会显示图像（如chrome dev工具中的网络选项卡所示）。如果我静态地应用样式（或类），图像显示没问题，只是加载更慢...因此尝试应用指令。

我知道bgSrc指令中发生了一些错误，但我无法确定它。任何有关此事的帮助将不胜感激：）

Answer 1

element.hide不是函数

您正在致电

element.hide();

链接函数中的

，但jQlite没有hide()方法。由于你没有在你的Codepen中包含jQuery，所以它就失败了。

https://docs.angularjs.org/api/ng/function/angular.element

相反，请使用css

element.css('visibility', 'invisible');

或者添加jQuery

用于预加载背景图像的自定义指令AngularJS

1 个答案: