title: Better way to wrap a source element from a Directive?
body: <p>I'm writing a Directive (using AngularJS 1.2.0-rc2, if that matters) that adds a "clear" button (think of the "x" button that the browser adds for <code>&lt;input type="search"&gt;</code> elements) to an <code>&lt;input&gt;</code>.</p>
  
  <p>As the "clear" button is injected from the Directive and is positioned absolutely, I'd like to contain both the existing <code>&lt;input&gt;</code> and the newly added "clear" button in a wrapper element that has <code>position: relative</code> to ensure proper positioning of the "clear" button.</p>
  
  <p>The declared HTML looks like this:</p>
  
  <pre><code>&lt;input type="text" id="myField" data-ng-model="someModel" data-search&gt;
  </code></pre>
  
  <p>The Directive I have so far:</p>
  
  <pre><code>angular.module('myApp', []).directive('search', function() {
    var
      clear = angular.element('&lt;a href role="button" class="btn x" style="display:none"&gt;&amp;times;&lt;/a&gt;'),
      wrapper = angular.element('&lt;div style="position: relative"&gt;&lt;/div&gt;');
  
    return {
      restrict: 'A',
      link: function( scope, element, attrs ) {
        element.wrap(wrapper.append(clear));
  
        // more code that's not relevant to my question
      }
    };
  });
  </code></pre>
  
  <p>The HTML I end up with is</p>
  
  <pre><code>&lt;div style="position: relative"&gt;
    &lt;a href role="button" class="btn x" style="display: none"&gt;&amp;times;&lt;/a&gt;
    &lt;input type="text" id="myField" data-ng-model="someModel" data-search&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>which is what I'm after, but I'd like to ideally template the two new elements and abstract the DOM manipulation out of my <code>link</code> function.</p>
  
  <p>I feel like there's probably a better way to go about this using either or both <code>replace</code>/<code>template</code> and <code>transclude</code> options, but I'm not sure how to retain and use the source element (with all of its attributes and data bindings) with either of those options.</p>
  
  <p>Also note that even though my sample has an <code>ng-model</code> defined on the source element, that should be considered optional. I'd also like to keep the Directive restricted to attributes (<code>restrict: 'A'</code>).</p>