title: Retrieve inner HTML of AngularJS directive before templateUrl overrides it
body: <p>I have a directive I use for form validation boilerplate which I recently refactored. Allow me to explain the directive a little further before expanding.</p>
  
  <p>The directive usage:</p>
  
  <pre><code>&lt;form class="form-horizontal" name="personalDetails" validated-form&gt;
  
      &lt;!-- Pass buttons into form through here --&gt;
      &lt;a href="" class="btn btn-success" 
          data-ng-click="saveDetails()"
          data-ng-disabled="!personalDetails.$valid"&gt;Save Changes&lt;/a&gt;
  
  &lt;/form&gt;
  </code></pre>
  
  <p>Previously, my directive looked something like this, and it <strong>worked</strong>.</p>
  
  <pre><code>app.directive('validatedForm', function($compile, $sce) {
      return {
          restrict: 'A',
          scope: true,
          link: function(scope, element, attrs) {
  
              var template = //... HTML boilerplate code
              var buttons  = element.html(); // Get contents of element before overriding
  
              element.html(template + buttons);
              $compile(element.contents())(scope);
  
          }
      }
  });
  </code></pre>
  
  <p>The html template was becoming messy, and I wanted to wrap the buttons 'inside' of the template, rather than after them. So I refactored into what I thought was a much better directive.</p>
  
  <pre><code>app.directive('validatedForm', ['$compile', '$sce', function ($compile, $sce) {
  
      var domContent = null;
  
      return {
          restrict: 'AE',
          scope: true,
          templateUrl: '/Content/ngViews/directives/validated-form.html',
          link: function(scope, element, attrs) {
  
              // This now returns the contents of templateUrl 
              // instead of what the directive had as inner HTML
              domContent = element.html(); 
  
              // Scope
              scope.form = {
                  caption: attrs.caption,
                  location: 'Content/ngViews/forms/' + attrs.name + '.html',
                  buttons: $sce.trustAsHtml(domContent),
                  showButtons: !(domContent.replace(' ', '') === '')
              };
  
          }
      };
  }]);
  </code></pre>
  
  <p>So what I'm noticing is that element.html() now retrieves the contents of the templateUrl instead of the contents of the inner HTML of my directive. How else can I get the contents of my directive before it gets overriden by the templateUrl?</p>