在AngularJS中使用div包装图像

Question

所以刚开始坐下来玩AngularJs.

我想用a包装一个图像,<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");
       }        
    }
 });

我尝试过的其中一个方法就是:

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如果我的指令要使用它,我只使用该属性.