javascript - 条件背景图像的 Angular Directive(指令)

Question

我想要一个指令，将背景图像设置为特定图像(如果存在)或默认图像。

url采用 /images/cards/card{{$index}}.jpg 形式来自ng-repeat ，但只有部分图像实际存在。

这样就可以了，但是失败了$http请求被记录到我不想要的控制台(因为此代码的全部目的是要意识到某些图像不存在)。有什么建议吗？ (似乎 <img> 标签有一个可以捕获的错误事件，但我找不到证据 background-image 也有一个错误事件。

angular.module("stickers")
.directive('bkgDiv', function($http) {
    return {
        scope: {
            url: '@'
        },
        link: function(scope, elem, attrs) {
            // console.log("bkgDiv", scope.url);
            $http.get(scope.url)
            .success(function() {
                elem.css({backgroundImage: "url("+scope.url+")"});
            })
            .error(function() {
                elem.css({backgroundImage: "url(/images/animal.png)"});
            })
        }
    }
});

Answer 1

在你的 Controller 中，你将建立另一个与图像 URL 处于同一级别的字段，然后测试它是否存在，将结果存储在 bool 值中(就 JS 的 bool 值而言)。这样您就可以在您的 View 中绑定(bind)到这个新的 bool 值。