angularjs - Directive that inserts code before and after self -

i getting used doing things "angular" way, please excuse if break major rules or best practices.

i trying generate directive have input field icon on right side clear contents.

i want write in html:

<input clearable-input ng-model="name">   

i tried use directive so:

directives.directive("clearableinput", function($compile, $parse) {     return {       scope: false,       replace:    false,       transclude: false,       restrict:    "a",        link: function( scope, element, attrs, controller){          var pre = "<span style='position: relative;'>" +               "  <span style='padding-right: 16px; width: 100%;' ng-transclude>";          var post ="  </span>" +           "  <span class='clicktoclear' style=\"position: absolute; display: block; top: -2px; right: 0px; width: 16px; height: 16px; background: url('images/sprites.png') 0 -690px; cursor: pointer;\" ng-click=''></span>" +           "</span>";                element.insertbefore(pre);               element.insertafter(post);                element.find("span.clicktoclear").on( "click", function(){         var parsed = $parse(attrs["clearableinput"]);         if( parsed.assign ) {           parsed.assign( scope, "");         }         scope.$digest();       });   } }; 

});

this not work expected @ all. have come wrap around input has "clearable-input" attribute. can work "replace: true" , "transclude: true" , able use input field have in html.

did create directive adds code before , after itself?

thanks help.

andreas

you not using ng-tranclude correctly. have tried emulate scenario in fiddle. have look

basically need create template, , add ng-transclude there. not in link function.