title: Wrapping an image with a div in AngularJS
body: <p>So just starting to sit down and play with AngularJs.</p>
  
  <p>I would like to wrap an image with a <code>&lt;div&gt;</code> and have reached a (very early) point where I have little idea what I am actually doing.</p>
  
  <p>My HTML is as so - notice the attribute set-background</p>
  
  <pre><code>&lt;div id="home"&gt;
          &lt;img src="~/Content/Images/Site/home-background.jpg" set-background /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I am hoping to pick this (set-background) up in angular, then apply a class to the element and also wrap the element (an IMG in this case) with a div. </p>
  
  <p>It's the wrapping-with-a-div bit that has me stumped..</p>
  
  <p>This is the Angular I have so far.. (not a lot..)</p>
  
  <p>I have <code>scope: {}</code> in my directive to ensure that anything i set to this element will not be affected by others of the same directive - I intend to do a lot more with this directive..</p>
  
  <p>With this, I can add a class easy enough.</p>
  
  <pre><code>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");
         }        
      }
   });
  </code></pre>
  
  <p>One of the things I have tried, to get the div AROUND the image was:</p>
  
  <pre><code>dwApp.directive("setBackground", function () {
  
      return {
          restrict: "A",
          scope: {},
          transclude:true,
          template: "&lt;div style='border:solid 1px green;' ng-transclude&gt;&lt;/div&gt;",
          link: function (scope, element, attrs) {
              element.addClass("backgroundCover");
          }        
      }
  });
  </code></pre>
  
  <p>This resulted in the HTML - not right...</p>
  
  <pre><code>&lt;img src="/Content/Images/Site/home-background.jpg" set-background="" class="ng-isolate-scope backgroundCover"&gt;
       &lt;div style="border:solid 1px green;" ng-transclude=""&gt;&lt;/div&gt;
  &lt;/img&gt;
  </code></pre>
  
  <p>I'm trying to get:</p>
  
  <pre><code>&lt;div style="border:solid 1px green;"&gt;
       &lt;img src="/Content/Images/Site/home-background.jpg" set-background="" class="ng-isolate-scope backgroundCover"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I clearly have a huge lack of understanding how this works... :)</p>
  
  <p>Any help would be great - thanks.</p>