Angularjs: ng-src 等效于 back-image: url (...)

在 angularjs 中有 抓到你了，它的目的是在 angularjs 计算 {{和 }}之间的变量之前，不会收到无效 URL 的错误。

问题是，我使用了相当多的 DIV，并将 background-image设置为 URL。我这样做是因为优秀的 CSS3属性 background-size作物的图像，以确切的大小的 DIV。

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

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

我已经找了很多，找不到正确的方法来做这件事。由于这些错误，我的应用程序变得一团糟。

127606 次浏览
小开
最佳答案

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/

小开

上面的答案不支持可观察的插值(并且花费了我大量的时间来调试)。在@BrandonTilley 的 JsFiddle 链接评论是我的答案，我将在这里重新发布保存:

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>
小开

这个我喜欢

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

也可以用 ng-style做类似的事情:

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

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

小开

类似胡布利的回答，只是插值:

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

只是一个品味问题，但如果你喜欢像这样直接访问变量或函数:

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

而不是像这样插值:

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

然后您可以定义指令与 scope.$watch略有不同，它将在 属性

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: $Observer 和 $watch 方法之间的区别

小开

既然你提到了 ng-src，而且看起来好像你希望页面在加载你的图像之前完成渲染，你可以修改 jaime 的答案来运行本地指令 之后浏览器完成渲染。

这篇 blog post 很好地解释了这一点; 本质上，在对 CSS 进行修改的回调函数之前插入 window.setTimeout的 $timeout包装纸。

小开

我发现有1.5个组件可以从 DOM 抽象样式，以便在我的异步环境中工作得最好。

例如:

<div ng-style="{ 'background': $ctrl.backgroundUrl }"></div>

在控制器里，有这样的东西:

this.$onChanges = onChanges;


function onChanges(changes) {
if (changes.value.currentValue){
$ctrl.backgroundUrl = setBackgroundUrl(changes.value.currentValue);
}
}


function setBackgroundUrl(value){
return 'url(' + value.imgUrl + ')';
}
小开

@ jaime 你的答案是好的，但是如果你的页面有 $http.get，那么你需要使用 ng-if

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

在工厂里

app.factory('dataFactory', function($http){
var factory = {};
factory.getAboutData = function(){
return $http.get("api/about-data.json");
};
return factory;
});

在控制器区域

app.controller('aboutCtrl', function($scope, $http, dataFactory){
$scope.aboutData = [];
dataFactory.getAboutData().then(function(response){
// get full home data
$scope.aboutData = response.data;
// banner data
$scope.banner = {
"image": $scope.aboutData.bannerImage,
"text": $scope.aboutData.bannerText
};
});
});

和视图，如果你使用 n- 如果像下面这样，那么你将得到插值的图像，否则，你不能得到的图像，因为指令得到的价值之前，HTTP 请求。

<div class="stat-banner"  ng-if="banner.image" background-image-directive="\{\{banner.image}}">

提交答案