条件背景图像的角度指令

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

在您的控制器中，您将建立另一个与图像 url 处于同一级别的字段，然后测试其是否存在，将结果存储在布尔值中（就 JS 所做的布尔值而言）。这样您就可以在视图中绑定到这个新的布尔值。