Presently, there is an element structured like this:
<input test class="foo bar" ng-model="foo" name="foo"/>
My goal is to transform it into the following format when it includes the "test" attribute:
<div class="something">
<input type="text" class="foo bar" ng-model="foo" name="foo"/>
<span>test</span>
</div>
However, I'm encountering issues with transclusion. Instead of transferring the attributes to the input, they are being added to the div element. This results in a structure like:
<div class="something foo bar" type="text" ng-model="foo" name="foo">
<input/>
<span>test</span>
</div>
Below is the directive implementation:
.directive('test', [function () {
return {
transclude:true,
replace:true,
template:'<div class="something">\
<input ng-transclude>\
<span>hi</span>\
</div>',
link: function (scope, element, attrs, ngModel) {
// do stuff
}
}
}])