在我的ng-template中,我有一个img标签,我正在尝试应用背景图像。找到以下模板:
Collector
我在.css文件中应用.png图标:
<script type="text/ng-template" id="myModalContent.html">
...
<a style="margin-left: 20px;" href ="">
<img id = "printIcon" style="width: 64px;height: 70px">
</a>
...
</script>
在模式对话框中打开ng-template时,会对图像发出请求(我在网络选项卡中看到)并正确加载,但不会应用于DOM。即使检查img标签,也会将background-image属性作为printingIcon.png文件并正确预览。使用ng-template将图像应用于DOM需要做些什么特别的事情,还是我做错了什么?谢谢!
答案 0 :(得分:1)
更多&#34; Angular方式&#34;实现你想要的是使用一个指令来操纵DOM。
这样的事情:
var app = angular.module('app',[]);
app.controller('ctrl', function($scope){
});
app.directive('backImg', function(){
return function(scope, element, attrs){
var url = attrs.backImg;
element.css({
'background-image': 'url(' + url +')',
'background-size' : 'cover'
});
};
});
查看full Fiddle。
答案 1 :(得分:0)
如果您不反对将文件引用放在标记中,那么这将起作用:
<img ng-style="{'background-image':'url(/img/printingIcon.png)'}" width="64" height="70">