I'm working on developing custom elements that will transform my form elements to match the styling structure of Bootstrap's forms.
Essentially,
<my-input ng-model="myname">
should be transformed into
<div class="form-element">
<input ng-model="myname" />
</div>
The issue arises when using transclude, as the ng-model attribute gets attached to the root element resulting in the following DOM structure:
<div class="form-element" ng-model="myname">
<input>
</div>
Is there a way to specify which inner element should receive the ng-model attribute transfer?
If I were to create another directive called my-model and utilize it instead of ng-model, how can I ensure this is allocated to the inner input element?
<my-input my-model="myname">
should then transition to
<div class="form-element">
<input ng-model="myname" />
</div>