title: wrapping inputs in directives in angular
body: <p>I had the idea to wrap inputs into custom directives to guarantee a consistent look and behavior through out my site. I also want to wrap bootstrap ui's datepicker and dropdown. Also, the directive should handle validation and display tooltips.</p>
  
  <p>The HTML should look something like this:</p>
  
  <pre><code>&lt;my-input required max-length='5' model='text' placeholder='text' name='text'/&gt;
  </code></pre>
  
  <p>or</p>
  
  <pre><code>&lt;my-datepicker required model='start' placeholder='start' name='start'/&gt;
  </code></pre>
  
  <p>in the directives i want to create a dom structure like:</p>
  
  <pre><code>&lt;div&gt;
   &lt;div&gt;..&lt;/div&gt; //display validation in here
   &lt;div&gt;..&lt;/div&gt; //add button to toggle datepicker (or other stuff) in here
   &lt;div&gt;..&lt;/div&gt; //add input field in here
  &lt;/div&gt;
  </code></pre>
  
  <p>I tried various ways to achieve this but always came across some tradeoffs:</p>
  
  <ol>
  <li><p>using transclude and replace to insert the input into the directives dom structure (in this case the directive would be restricted to 'A' not 'E' like in the example above). The problem here is, that there is no easy way to access the transcluded element as I want to add custom attributes in case of datepicker. I could use the transclude function and then recompile the template in the link function, but this seems a bit complex for this task. This also leads to problems with the transcluded scope and the toggle state for the datepicker (one is in the directives scope, the other in the transcluded scope).</p></li>
  <li><p>using replace only. In this case, all attributes are applied to the outermost div (even if I generate the template dom structure in the compile function). If I use just the input as template, then the attributes are on the input, but I need to generate the template in the link function an then recompile it. As far as I understand the phase model of angular, I would like to avoid recompiling and changing the template dom in the link function (although I've seen many people doing this).</p></li>
  </ol>
  
  <p>Currently I'm working with the second approach and generating the template in the link function, but I was wondering if someone had some better ideas!</p>