angularjs: ng-src等价于background-image:url(...)

Question

在angularjs中，你有一个tag ng-src，它的目的是在angularjs计算放在{{和}}之间的变量之前，你不会因为一个无效的url而收到错误。

问题是，我使用了相当多的DIV，并将background-image设置为url。我这样做是因为出色的CSS3属性background-size，它可以将图像裁剪成DIV的精确大小。

唯一的问题是，我收到了很多错误，原因与他们创建ng-src标签的原因完全相同:我在url中有一些变量，浏览器认为图像不存在。

我意识到有可能写一个粗糙的{{"style='background-image:url(myVariableUrl)'"}}，但这看起来很“脏”。

我已经搜索了很多，但找不到正确的方法。由于所有这些错误，我的应用程序变得一团糟。

Answer 1

div是一个本机指令，所以您似乎需要一个类似的指令来修改ngSrc的background-image样式。

您可以编写自己的指令来做您想要做的事情。例如

app.directive('backImg', function(){
    return function(scope, element, attrs){
        var url = attrs.backImg;
        element.css({
            'background-image': 'url(' + url +')',
            'background-size' : 'cover'
        });
    };
});​

您可以像这样调用它

<div back-img="<some-image-url>" ></div>

将可爱的猫咪作为额外奖励的JSFiddle：http://jsfiddle.net/jaimem/aSjwk/1/

Answer 2

这件很适合我

<li ng-style="{'background-image':'url(/static/'+imgURL+')'}">...</li>

Answer 3

上面的答案不支持可观察的插值(并且花费了我大量的时间尝试调试)。@BrandonTilley评论中的jsFiddle link是对我有效的答案，为了保存，我将在这里重新发布：

app.directive('backImg', function(){
    return function(scope, element, attrs){
        attrs.$observe('backImg', function(value) {
            element.css({
                'background-image': 'url(' + value +')',
                'background-size' : 'cover'
            });
        });
    };
});

使用控制器和模板的示例

控制器:

$scope.someID = ...;
/* 
The advantage of using directive will also work inside an ng-repeat :
someID can be inside an array of ID's 
*/

$scope.arrayOfIDs = [0,1,2,3];

模板:

在模板中使用如下所示：

<div back-img="img/service-sliders/{{someID}}/1.jpg"></div>

或者像这样：

<div ng-repeat="someID in arrayOfIDs" back-img="img/service-sliders/{{someID}}/1.jpg"></div>