angularjs：NG-SRC相当的背景图像：网址（...） [英] angularjs: ng-src equivalent for background-image:url(...)

问题描述

在angularjs你有标签NG-SRC 其目的，你将不会收到angularjs之前无效的URL错误得到评估之间放置在变量 {{和}} 。

In angularjs you have the tag ng-src which has the purpose that you won't receive an error for an invalid url before angularjs gets to evaluate the variables placed in between {{ and }}.

问题是，我用很长一段DIV的有背景图片设置为一个URL。我这样做是因为优秀的CSS3属性背景大小该图像作物的DIV的确切大小的。

The problem is that I use quite some DIV's with a background-image set to an url. I do this because of the excellent CSS3 property background-size which crops the image to the exact size of the DIV.

唯一的问题是，我收到了很多的错误，为他们创造了NG-SRC标记的确切同样的原因：我在url中的一些变量和浏览器认为该图像不存在

The only problem is that I receive a lot of errors for the exact same reason they created a ng-src tag: I have some variables in the url and the browser thinks the image doesn't exist.

我认识到，有写粗的可能性 {{的风格=背景图像：网址（myVariableUrl）'}} ，但这似乎脏'。

I realize that there is a possibility of writing a crude {{"style='background-image:url(myVariableUrl)'"}}, but this seems 'dirty'.

我已经搜查了很多，无法找到这样做的正确方法。我的应用程序正在成为一个烂摊子，因为所有这些错误的。

I've searched a lot and can't find the right way to do this. My app is becoming a mess because of all of these errors.

推荐答案

ngSrc 是土生土长的指令，这样看来你想有一个类似的指令，修改你的div的背景图片的风格。

ngSrc is a native directive, so it seems you want a similar directive that modifies your div's background-image style.

您可以编写自己的指令，你想要做什么。例如：

You could write your own directive that does exactly what you want. For example

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/

这篇关于angularjs：NG-SRC相当的背景图像：网址（...）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！