Angularjs directive template transclusion

Jon Snow

I have an element like this:

<input test class="foo bar" ng-model="foo" name="foo"/>

And I'm trying to turn it into something like the example below, when it has the "test" attribute:

<div class="something">
    <input type="text" class="foo bar" ng-model="foo" name="foo"/>
    <span>test</span>
</div>

However I'm having problems with transclusion, instead of the attributes being transferred to the input, they get transferred to the div, so I end up with something like:

<div class="something foo bar" type="text" ng-model="foo" name="foo">
    <input/>
    <span>test</span>
</div>

Here's the directive:

.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
        }
    }
}])
Jon Snow

Apparently it is possible, credits to Foxandxss from the AngularJS irc channel, for the link.

http://plnkr.co/edit/7gOQEODWlJMV9Fe9a9YV?p=preview

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

TOP Ranking

HotTag

Archive