javascript - 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 时，会发出图像请求(我在网络选项卡中看到)并正确加载，但不会应用于 DOM。即使检查 img 标签也具有 background-image 属性作为 printingIcon.png 文件并正确预览它。使用 ng-template 将图像应用于 DOM 是否需要做任何特别的事情，或者我做错了什么？谢谢!

Answer 1

一种更“Angular 方式”来实现你想要的是使用指令来操作 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 .