Transclude Directive

Transclude Directive

HTML

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<div ng-app="myApp">
    <span clearable-input><input ng-model="name"></span>
</div>
<script type="text/ng-template" class="template" id="clearTemplate">
    <span style = 'position: relative;' > 
        <span style = 'padding-right: 16px; width: 100%;'
    ng-transclude> </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>
</script>

JavaScript

var app = angular.module('myApp', []);

app.controller('myController', ['$scope', function ($scope) {
    $scope.message = 'Hello Angular';
}]);

app.directive('clearableInput', function () {
    return {
        scope: false,
        replace: true,
        transclude: 'element',
        restrict: "A",
        template: $('#clearTemplate')[0].innerHTML,
        link: function (scope, element, attrs, controller) {

        }
    }
});