javascript - Transfer Directives to Child DOM Elements -

i've created custom directive textbox augmented markup.

module.directive("inputfield", ["$log", function($log) {     return {       restrict: "e",       replace: true,       scope: {         labeltext: "@"       },       templateurl: "input-field.template.html"     }   }]); 

template file:

<div class="fancy-field">   {{ labeltext }}:   <input type="text"> </div> 

i want directive support adding standard html5 input attributes , angular directives , apply them child input. accomplish transferring selected attributes parent <div> element inner <input> in directive's compile function.

  compile: function(element, attributes) {      var inputelement = $(element.children("input")[0]);     if(attributes.innerdirective) {        // transfer inner-directive element specified on parent       // child input       inputelement.attr("inner-directive", attributes.innerdirective);        // remove attribute specified on outer element       // in futile attempt keep inner-directive       // applying outer div       $(element).removeattr("inner-directive");       delete attributes.innerdirective;       delete attributes.$attr.innerdirective;      }      return {};    } 

this succeeds in applying supported attributes , directives <input>, , removes attributes outer element in dom. however, not prevent directives being applied both inner , outer elements. want able control this, supported input directives (e.g. ng-pattern) can transferred input without having side effects on outer div. want avoid unnecessary overhead of processing directive don't want use.

i've created plunkr demo behavior. logs console prove inner-directive applies both inner , outer elements.

https://plnkr.co/edit/3qlt6mzcvkecybehg81s

is possible accomplish in way describing? how should creating custom directive can apply directives it's children?

i able resolve issue setting high priority directive , setting terminal true.

  module.directive("inputfield", ["$log", function($log) {     return {       restrict: "e",       replace: true,       priority: 1000,       terminal: true       // ... rest of definintion ...     }   }]); 

the higher priority helps ensure input-field directive processed first , terminal tells angular stop compilation of remaining directives lower priority input-field. allows me defer actual processing of these directives until have been transferred appropriate child element.

this updated plunker shows fix in action:

https://plnkr.co/edit/nouwgkn11oc86hbtqtik