javascript - 在AngularJS中用div包装图像

因此，刚开始坐下来玩AngularJs。

我想用<div>包装图像，并且已经到达(很早)一点，我几乎不知道自己实际上在做什么。

我的HTML是这样-注意属性set-background

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

我希望按 Angular 拾取此背景(设置背景)，然后将一个类应用于该元素，并用div包装该元素(在这种情况下为IMG)。

这就是我的困扰。

到目前为止，这是我的 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>

我显然非常缺乏了解这是如何工作的... :)

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

最佳答案

您可以在指令中简单地使用element.wrap('<div></div>');。使用该方法，您不需要transclude。同样，在这种情况下，没有理由为您的指令提供隔离范围。仅当您打算在指令中使用scope时，某些事情才会干扰。如果我的指令打算使用scope属性，我只会使用它。