AngularJs append directive's element to its template

Question

How i can append directive element to its template ? Something like this :

.directive('labelize',function(){
   return {
      restrict: 'A',
      template: '<div><ng-element/></div>'
      ...
   }
});

# Html
// <input labelize name="name"/>

# Output
// <div><input name="name"/></div>

Update

When i use this directive :

app.directive 'labelize', () ->
      restrict: 'A'
      requrie: 'input'
      controller: [
           '$scope', '$element', '$attrs',
           ( $scope , $element , $attrs ) ->
                  $scope.label = $attrs.placeholder
      ]
      replace: true
      transclude: 'element'
      template: '<div class="labelize"><span class="label">{{ label }}</span><ng-transclude/></div>'

with this html :

<input labelize placeholder="Name" ng-class="{ 'red': true }" ng-focus="Focused()"/>

<!-- Angular compiled output -->
<div class="labelize" labelize placeholder="Name" ng-class="{ 'red': true }" ng-focus="Focused()" class="red">
    <input labelize placeholder="Name" ng-class="{ 'red': true }" ng-focus="Focused()"/>
</div>

ngFocus, ngClass or any ng attribute doesn't work after labelize directive.

Answer 1

You could use transclue:'element' for this .

 .directive('labelize',function(){
    return {
        restrict: 'A',
        template: "<div ng-transclude></div>",
        replace:true,
        transclude: "element",


    }

input : <input labelize name="name" />

output : <div labelize="" name="name" ng-transclude=""><input class="ng-scope" labelize="" name="name"></div>

I hope it works for you.