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

Question

在我的ng-template中，我有一个img标记，我试图将其应用于背景图像。在下面找到模板：

<script type="text/ng-template" id="myModalContent.html">
...
    <a style="margin-left: 20px;" href ="">
        <img id = "printIcon" style="width: 64px;height: 70px">
    </a>
...
</script>

我正在.css文件中应用.png图标：

#printIcon{
    background-image: url("../img/printingIcon.png");
    background-size: 64px 70px;
}

当在模式对话框中打开ng-template时，会发出对图像的请求(我在network选项卡中看到)，并正确加载，但不会应用于DOM。即使检查img标记也具有与printingIcon.png文件相同的背景图像属性，并且可以正确地预览它。在使用ng-template将图像应用到DOM时，需要做些什么特殊的事情吗?或者我做错了什么？谢谢!

Answer 1

实现所需内容的一种更“角度”的方法是使用指令操作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">