I am rewriting a library (which was developed by me in angular1.x) using angular4. In that library I used to copy the attributes from wrapper directive to inner html element. For Example <gn-input component.ng-model="somevar"></gn-input>

Html Template for gn-Input directive has <input class="component" type="text" />

In compile function of gn-input, I used to read all attributes on the gn-input element and copy them on input.component (with component class) tag. This was giving me flexibility because I was using inherited scope (scope:true)

---- To make it more clear For example, there is one more directive, I developed

<gn-address country.ng-model="countryField" state.ng-model="stateField"></gn-address>

In template of gn-address, there were two inputs (actually dropdowns but assume inputs for simplicity) <input class='country' type="text" /> and <input class='state' type="text" />.

In compile function of gn-address I used to read all attributes on the element of gn-address and setAttribute them on respective inputs of class.

This approach saved lots of my efforts to support all the directives which inner elements do support and wrapper was actually a wrapper.

I am so much used to angular1 and it's flexibility, I am finding it difficult to do the same thing in angular4 keeping the library AOT compatible.