Javascript 在AngularJS中使用div包装图像

所以我开始坐下来和AngularJs一起玩

我想用一个

来包装一个图像，并且已经达到了一个（非常早的）点，我几乎不知道我实际上在做什么

我的HTML也是如此——请注意属性集background

<div id="home">
        <img src="~/Content/Images/Site/home-background.jpg" set-background />
</div>

我尝试过的一件事是，让div围绕图像：

dwApp.directive("setBackground", function () {

    return {
        restrict: "A",
        scope: {},
        transclude:true,
        template: "<div style='border:solid 1px green;' ng-transclude></div>",
        link: function (scope, element, attrs) {
            element.addClass("backgroundCover");
        }        
    }
});

dwApp.directive（“setBackground”，函数（）{
返回{
限制：“A”，
作用域：{}，
是的，
模板：“”，
链接：函数（范围、元素、属性）{
元素。添加类别（“背景封面”）；
}        
}
});

这导致了HTML-不正确

<img src="/Content/Images/Site/home-background.jpg" set-background="" class="ng-isolate-scope backgroundCover">
     <div style="border:solid 1px green;" ng-transclude=""></div>
</img>

我试图得到：

<div style="border:solid 1px green;">
     <img src="/Content/Images/Site/home-background.jpg" set-background="" class="ng-isolate-scope backgroundCover">
</div>

很明显，我非常不了解这是如何工作的……：）

---

任何帮助都会很好-谢谢。

您只需使用

element.wrap（“”）在指令中。使用这种方法，您不需要
transclude
。此外，在这种情况下，没有理由给您的指令一个单独的作用域。如果要在指令中使用
范围
，则某些内容可能会发生干扰。如果我的指令要使用某个属性，我只会使用
scope
属性。
天哪……就这么简单非常感谢。我浏览了这些文件，但发现它们有点让人不知所措。。我使用的是一个独立的作用域，因为背景最终会根据窗口的滚动改变
css
top
样式，所以我不希望所有的
setBackground
同时改变-不确定在这种情况下独立的作用域是否正确。。我也要扔掉这封信；误解了它的用途。再次感谢。@Darren您的
transclude
-非常接近，但是它处理的是元素的内容，而不是元素本身。啊，明白了。写下这个问题后不久，我看了一段egghead视频，注意到指令与元素相关，而不是属性。我刚刚发布了另一个稍微相关的问题。。如果你有时间看一看，也许你会很乐意帮忙？如果没有，不用担心。问题在这里->
<div style="border:solid 1px green;">
     <img src="/Content/Images/Site/home-background.jpg" set-background="" class="ng-isolate-scope backgroundCover">
</div>