title: How to attach attributes of a directive template to other elements than the parent in AngularJS?
body: <p>I'd like to implement a directive that converts 
  <code>&lt;specialInput&gt;&lt;/specialInput&gt;</code> into something like </p>
  
  <pre><code>&lt;div id="myDiv"&gt;
      &lt;label&gt;&lt;/label&gt;
      &lt;input&gt;&lt;/input&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>However, all attributes that the user provides by putting them into the <code>specialInput</code>-tag like <code>&lt;specialInput id="test" class="test2" ... required&gt;&lt;/specialInput&gt;</code> are currently attached to the div element myDiv. 
  <strong>Rather than that, I would like to attach all attributes to the <code>input</code>-tag.</strong></p>
  
  <p><em>Note:</em> One solution would be manually attaching every possible attribute to the label tag by adding the variable (e.g. <code>type="' + atts.type + '"</code>) to the template and then remove these attributes from the parent by using the linkfunction. This is not what I want to achieve though. There are way too many possible attributes to consider this solution.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// special-input Angular
  
  
  (function () {
    'use strict';
  
    function specialInputDirective($compile) {
  
      function templateFunction(element, attrs) {
        var template = [
         '&lt;div class="control-group"&gt;'+
         '&lt;label for="' + attrs.name + '" class="control-label"&gt;' + attrs.label + '&lt;/label&gt;' +
         ' &lt;div class="controls"&gt;' +
         '  &lt;input id="' + attrs.id + '" type="' + attrs.type + '" ' +                                            
         '       ng-model="' + attrs.name + '" ' +
         (attrs.ngTrueValue ? 'ng-true-value="' + attrs.ngTrueValue + '" ' : '') +
         (attrs.ngFalseValue ? 'ng-false-value="' + attrs.ngFalseValue + '"' : '') +
         ' " placeholder="' + attrs.placeholder + '"' + ' ' +
         attrs.required + ' ' + attrs.disabled + ' ' + attrs.readonly  +
         ' name="' + attrs.name + '"' +
         ' required&gt;' +
         ' &lt;/div&gt;' +
         '&lt;/div&gt;'
        ].join('');
        return template;
      }
  
      return {
        link: linkFunction,
        restrict: 'E',
        replace: true,
        transclude: true,
        template: templateFunction
      };
  
      //////////
  
      function linkFunction(scope, inputElement, attrs, ctrl, transcludeFn) {
        // Removes user defined attributes from 'control-group'.
        // These are added to the &lt;input&gt; element instead (Defined in: Template)
        // BUT: there are many, many more attributes than this! So this is not the solution I'm aiming for.
        inputElement.removeAttr('id');
        inputElement.removeAttr('type');
        inputElement.removeAttr('label');
        inputElement.removeAttr('placeholder');
        inputElement.removeAttr('required');
        inputElement.removeAttr('disabled');
        inputElement.removeAttr('readonly');
        inputElement.removeAttr('name');
      }
    }
  
  
    //////////
  
    function initModule(angular) {
      ...
    }
  
  }());</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form name="myForm" class="form-horizontal" style="max-width: 700px;"&gt;
      &lt;h4&gt;Horizontal Label&lt;/h4&gt;
      &lt;special-input name="myName" type="email" label="Email" placeholder="Email"&gt;&lt;/special-input&gt;
      &lt;special-validation for="myForm.myName" message="required" type="error"&gt;This message box represents an error&lt;/special-validation&gt;
      &lt;special-validation for="myForm.myName" message="minlength" type="warning"&gt;This message box represents a warning&lt;/special-validation&gt;
      &lt;special-validation for="myForm.myName" message="maxlength"&gt;This message box represents an error&lt;/special-validation&gt;
      &lt;special-validation for="myForm.myName" message="email"&gt;Invalid email address&lt;/special-validation&gt;
  
      &lt;special-input type="text" label="Text" placeholder="Required input" name="myName2" ng-minlength="5" ng-maxlength="20" required&gt;&lt;/special-input&gt;
  
      &lt;special-input type="password" label="Password" placeholder="Password"&gt;&lt;/special-input&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>