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

Question

在angularjs中你有标签ng-src,其目的是在angularjs评估位于{{和之间的变量之前,你不会收到无效网址的错误}}.

问题是我使用了一些DIV,并background-image设置了一个url.我这样做是因为优秀的CSS3属性background-size可以将图像裁剪为DIV的精确尺寸.

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

我意识到有可能写出原油{{"style='background-image:url(myVariableUrl)'"}},但这看起来很"脏".

我搜索了很多,找不到正确的方法来做到这一点.由于所有这些错误,我的应用程序变得一团糟.

Answer 1

这个对我有用

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

Answer 2

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/

Answer 3

上面的答案不支持可观察的插值(并且我花了很多时间尝试调试).该的jsfiddle链接在@BrandonTilley意见是对我工作的答案,我将重新发布这里保存:

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>

Answer 4

也可以这样做ng-style:

ng-style="image_path != '' && {'background-image':'url('+image_path+')'}"

它不会尝试获取不存在的图像.

Answer 5

与hooblei的答案类似,只需插值:

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

Answer 6

只是一个品味的问题,但如果您更喜欢直接访问变量或函数,如下所示:

<div id="playlist-icon" back-img="playlist.icon">

而不是像这样内插:

<div id="playlist-icon" back-img="{{playlist.icon}}">

那么你可以定义一个与scope.$watch该$parse属性相关的指令

angular.module('myApp', [])
.directive('bgImage', function(){

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

这里有更多背景知识:AngularJS:$ observe和$ watch方法之间的区别