angularjs：ng-src等效于background-image：url（…）

一尘不染

angularjs：ng-src等效于background-image：url（…）

angularjs

在angularjs中，您具有标记ng-
src，其目的是在angularjs评估介于{{和之间的变量之前，不会收到无效网址的错误}}。

问题是，我使用了很多DIV，并将其background-image设置为url。我之所以这样做，是因为CSS3具有出色的属性background- size，可以将图像裁剪为DIV的确切大小。

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

我意识到有写粗略的可能性{{"style='background-image:url(myVariableUrl)'"}}，但这似乎是“肮脏的”。

我搜索了很多内容，却找不到正确的方法。由于所有这些错误，我的应用变得一团糟。

阅读 383

2020-07-04

共1个答案

一尘不染

ngSrc是本机指令，因此您似乎想要一个类似的指令来修改div的 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/

2020-07-04