angularjs ng-style:background-image不起作用

我试图通过使用angular度ng-style应用背景图像到一个div(我以前曾尝试过一个自定义指令具有相同的行为),但它似乎并没有工作。

 <nav class="navigation-grid-container" data-ng-class="{ bigger: isNavActive == true }" data-ng-controller="NavigationCtrl" data-ng-mouseenter="isNavActive = true; $parent.isNavActive = true" data-ng-mouseleave="isNavActive = false; $parent.isNavActive = false" data-ng-show="$parent.navInvisible == false" data-ng-animate="'fade'" ng-cloak> <ul class="navigation-container unstyled clearfix"> <li class="navigation-item-container" data-ng-repeat="(key, item) in navigation" data-ng-class="{ small: $parent.isNavActive, big: isActive == true }" data-ng-mouseenter="isActive = true; isInactive= false" data-ng-mouseleave="isActive = false; isInactive= true"> <div data-ng-switch on="item.id"> <div class="navigation-item-default" data-ng-switch-when="scandinavia"> <a class="navigation-item-overlay" data-ng-href="{{item.id}}"> <div class="navigation-item-teaser"> <span class="navigation-item-teaser-text" data-ng-class="{ small: isScandinavia }">{{item.teaser}}</span> </div> </a> <span class="navigation-item-background" data-ng-style="{ 'background-image': 'public/img/products/{{item.id}}/detail/wide/{{item.images.detail.wide[0]}}' }"></span> </div> <div class="navigation-item-last" data-ng-switch-when="static"> <div class="navigation-item-overlay"> <div class="navigation-item-teaser"> <span class="navigation-item-teaser-text"> <img data-ng-src="{{item.teaser}}"> </span> </div> </div> <span class="navigation-item-background"> <img class="logo" data-ng-src="{{item.images.logo}}"> </span> </div> <div class="navigation-item-default" data-ng-switch-default> <a class="navigation-item-overlay" data-ng-href="{{item.id}}"> <div class="navigation-item-teaser"> <span class="navigation-item-teaser-text">{{item.teaser}}</span> </div> </a> <span class="navigation-item-background" data-ng-style="{ 'background-image': 'public/img/products/{{item.id}}/detail/wide/{{item.images.detail.wide[0]}}' }"></span> </div> </div> </li> </ul> </nav> 

但是,如果我尝试背景颜色,它似乎工作正常。 我尝试了远程源和本地源http://lorempixel.com/g/400/200/sports/ ,都没有工作。

正确的background-image语法是:

 background-image: url("path_to_image"); 

ng样式的正确语法是:

 ng-style="{'background-image':'url(https://www.google.comhttp://img.dovov.comsrpr/logo4w.png)'}"> 

您可以使用以下来parsingdynamic值:

 ng-style="{'background-image':'url({{myBackgroundUrl}})'}" 

或者像这样:

 ng-style="{'background-image': 'url(' + myBackgroundUrl + ')'}" 

如果你有数据你正在等待服务器返回(item.id),并有这样的结构:

 ng-style="{'background-image':'url(https://www.myImageplusitsid/{{item.id}})'}" 

确保你添加了像ng-if="item.id"

否则,你会有两个请求或一个错误。

对于那些正在努力与IE11的工作

HTML

 <div ng-style="getBackgroundStyle(imagepath)"></div> 

JS

 $scope.getBackgroundStyle = function(imagepath){ return { 'background-image':'url(' + imagepath + ')' } } 

这对我来说,花括号不是必需的。

 ng-style="{'background-image':'url(../../../app/img/notification/'+notification.icon+'.png)'}" 

notification.icon这里是范围variables。

如果我们有一个dynamic的值,需要在CSS背景或背景图像属性,它可以是更棘手的指定。

假设我们的控制器中有一个getImage()函数。 这个函数返回一个格式如下的string:url(icons / pen.png)。 如果我们这样做,则ngStyle声明的指定方式与以前完全相同:

 ng-style="{ 'background-image': getImage() }" 

请确保在背景图像键名称周围加上引号。 请记住,这必须被格式化为一个有效的Javascript对象键。

只是为了logging,你也可以像这样在控制器中定义你的对象:

 this.styleDiv = {color: '', backgroundColor:'', backgroundImage : '' }; 

然后你可以定义一个函数直接改变对象的属性:

 this.changeBackgroundImage = function (){ this.styleDiv.backgroundImage = 'url('+this.backgroundImage+')'; } 

这样做,你可以修改你的风格dinamicaly。