Question

所以刚开始坐下来玩AngularJs。

我想用<div>换一张图像，并且已达到（非常早）的点，我不知道自己在做什么。

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

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

我希望以角度为单位选择此（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属性。

在AngularJS中使用div包装图像

1 个答案: