angularjs ng风格:背景图像是't工作
angularjs ng-style: background-image isn't working
我试图通过使用角度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/
,都不起作用。
可以通过两种方式解析动态值。
带双大括号的插值:
ng-style="{'background-image':'url({{myBackgroundUrl}})'}"
字符串串联:
ng-style="{'background-image': 'url(' + myBackgroundUrl + ')'}"
ES6模板文字:
ng-style="{'background-image': `url(${myBackgroundUrl})`}"
background-image
的正确语法是:
background-image: url("path_to_image");
ng样式的正确语法是:
ng-style="{'background-image':'url(https://www.google.com/images/srpr/logo4w.png)'}">
如果您有数据,您正在等待服务器返回(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这里是作用域变量。
如果我们有一个动态值,需要在css背景或背景图像属性,这可能只是有点棘手具体说明
假设我们的控制器中有一个getImage()函数。这函数返回一个格式如下的字符串:url(icons/pen.png)。如果我们这样做,ngStyle声明将指定与以前完全相同的方式:
ng-style="{ 'background-image': getImage() }"
请确保在背景图像密钥名称周围加引号。请记住,必须将其格式化为有效的Javascript对象密钥。
对于记录,您还可以在控制器中定义您的对象,如下所示:
this.styleDiv = {color: '', backgroundColor:'', backgroundImage : '' };
然后您可以定义一个函数来直接更改对象的属性:
this.changeBackgroundImage = function (){
this.styleDiv.backgroundImage = 'url('+this.backgroundImage+')';
}
这样做,你可以随意地改变你的风格。
Angular 2及以上版本的语法已更改:
[ngStyle]="{'background-image': 'url(path)'}"
相关文章:
- 引导程序转盘不工作:堆叠图像(使用rails)
- 单击水平滚动库中的图像以居中显示无法工作的功能
- 图像翻转脚本未按预期工作
- 在页面中使用了两次多个图像上传,但第一个正在工作,另一个不起作用
- JQuery图像预览无法工作
- 弹出图像无法使用jquery在html中工作
- JQuery图像滑块和CSS转换只能工作一次
- 卷轴上的视差图像和粘滞标题无法正常工作
- 图像占位符没有't的工作原理与Angular 1中的相同
- 图像看起来像一个只在firefox中工作的按钮
- flexislider无法在现场工作,图像没有旋转,但导航点正在改变
- 更改图像src-dons't工作jquery/js
- JQuery图像大小计算没有'不能在Chrome/Safari中工作
- Fancybox图像点击可以独立工作,但不能与我的其他代码一起工作
- 谷歌图书预览没有在安全的https上显示图书图像链接,但在http上工作.在Google Chrome和Touch浏览器
- Elastislide-如何使其在不同的图像宽度下工作
- Jquery只有在加载图像后才能使fadeIn工作
- 在执行 h:命令链接操作时显示工作图像
- 为什么这个jQuery不能工作?图像淡出和淡出
- Flexslider-如何使用单个方向Nav使两个滑块一起工作(图像和段落文本)