Question

在我的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需要做些什么特别的事情，还是我做错了什么？谢谢！

Answer 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。

Answer 2

如果您不反对将文件引用放在标记中，那么这将起作用：

<img ng-style="{'background-image':'url(/img/printingIcon.png)'}" width="64" height="70">

AngularJS - 图像不在ng-template中渲染

2 个答案: