javascript - 在 AngularJS 中用 div 包裹图像

Question

所以才开始坐下来玩 AngularJs。

我想用 <div> 包裹图像并且已经达到了(很早)我几乎不知道自己实际上在做什么的地步。

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

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

我希望以 Angular 方式选择这个(set-background)，然后将一个类应用于该元素，并用 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属性(如果我的指令要使用其中的某些内容)。