用AngularJS中的div包装图像

Question

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

我想用<div>包装一张图像，并且（很早）就达到了我不知道自己到底在做什么的地步。

我的HTML是如此-注意属性集背景

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

我希望在角度中选择这个（设置背景），然后将一个类应用于元素，并用div包裹元素（在这种情况下是IMG）。

让我困惑的是用一个div位包装。。

这是我迄今为止的Angular。。（不是很多…）

我的指令中有scope: {}，以确保我为该元素设置的任何内容都不会受到同一指令的其他内容的影响——我打算对该指令做更多的工作。。

有了这个，我可以很容易地添加一个类。

var dwApp = angular.module('dwApp', ['ngRoute']); // ngRoute will be used shortly..
dwApp.directive("setBackground", function () {
    return {
       restrict: "A",
       scope: {}, 
       link: function (scope, element, attrs) {
         element.addClass("backgroundCover");
       }        
    }
 });

我尝试过的一件事是，在图像周围设置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");
        }        
    }
});

这导致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>

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

任何帮助都将是伟大的-谢谢。

Answer 1

您可以简单地在指令中使用element.wrap('<div></div>');。使用这种方法，您不需要transclude。此外，在这种情况下，没有理由给您的指令一个孤立的范围。只有当你要在指令中使用scope时，某些东西才会干扰。只有当我的指令要使用scope属性时，我才会使用它。