title: Customizing the template within a Directive
body: <p>I have a form that is using markup from Bootstrap, like the following:</p>
  
  <pre><code>&lt;form class="form-horizontal"&gt;
    &lt;fieldset&gt;
      &lt;legend&gt;Legend text&lt;/legend&gt;
      &lt;div class="control-group"&gt;
        &lt;label class="control-label" for="nameInput"&gt;Name&lt;/label&gt;
        &lt;div class="controls"&gt;
          &lt;input type="text" class="input-xlarge" id="nameInput"&gt;
          &lt;p class="help-block"&gt;Supporting help text&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/fieldset&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>There's a lot of boilerplate code in there, that I'd like to reduce to a new directive - form-input, like follows:</p>
  
  <pre><code>&lt;form-input label="Name" form-id="nameInput"&gt;&lt;/form-input&gt;
  </code></pre>
  
  <p>generates:</p>
  
  <pre><code>   &lt;div class="control-group"&gt;
        &lt;label class="control-label" for="nameInput"&gt;Name&lt;/label&gt;
        &lt;div class="controls"&gt;
          &lt;input type="text" class="input-xlarge" id="nameInput"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>I have this much working via a simple template.</p>
  
  <pre><code>angular.module('formComponents', [])
      .directive('formInput', function() {
          return {
              restrict: 'E',
              scope: {
                  label: 'bind',
                  formId: 'bind'
              },
              template:   '&lt;div class="control-group"&gt;' +
                              '&lt;label class="control-label" for="{{formId}}"&gt;{{label}}&lt;/label&gt;' +
                              '&lt;div class="controls"&gt;' +
                                  '&lt;input type="text" class="input-xlarge" id="{{formId}}" name="{{formId}}"&gt;' +
                              '&lt;/div&gt;' +
                          '&lt;/div&gt;'
  
          }
      })
  </code></pre>
  
  <p>However it's when I come to add in more advanced functionality that I'm getting stuck.</p>
  
  <h2>How can I support default values in the template?</h2>
  
  <p>I'd like to expose the "type" parameter as an optional attribute on my directive, eg:</p>
  
  <pre><code>&lt;form-input label="Password" form-id="password" type="password"/&gt;&lt;/form-input&gt;
  &lt;form-input label="Email address" form-id="emailAddress" type="email" /&gt;&lt;/form-input&gt;
  </code></pre>
  
  <p>However, if nothing is specified, I'd like to default to <code>"text"</code>.  How can I support this?</p>
  
  <h2>How can I customize the template based on the presence / absence of attributes?</h2>
  
  <p>I'd also like to be able to support the "required" attribute, if it's present.
  Eg:</p>
  
  <pre><code>&lt;form-input label="Email address" form-id="emailAddress" type="email" required/&gt;&lt;/form-input&gt;
  </code></pre>
  
  <p>If <code>required</code> is present in the directive, I'd like to add it to the generated <code>&lt;input /&gt;</code> in the output, and ignore it otherwise.  I'm not sure how to achieve this.</p>
  
  <p>I suspect these requirements may have moved beyond a simple template, and have to start using the pre-compile phases, but I'm at a loss where to start.</p>