我正在尝试使用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/
,都不起作用。
发布于 2013-06-23 01:02:36
background-image
的正确语法为:
background-image: url("path_to_image");
ng样式的正确语法是:
ng-style="{'background-image':'url(https://www.google.com/images/srpr/logo4w.png)'}">
发布于 2014-06-16 23:00:39
如果您有数据,那么您正在等待服务器返回(item.id),并具有如下结构:
ng-style="{'background-image':'url(https://www.myImageplusitsid/{{item.id}})'}"
确保添加了类似于ng-if="item.id"
的内容
否则,你要么有两个请求,要么有一个错误。
发布于 2016-01-04 21:11:45
这对我很有效,大括号不是必需的。
ng-style="{'background-image':'url(../../../app/img/notification/'+notification.icon+'.png)'}"
这里的notification.icon是作用域变量。
https://stackoverflow.com/questions/17252546
复制相似问题