transclude element demo

directive transclude option can clone a whole element and we can manipulate it

by Samar Pattanayak

HTML

<div ng-app="myApp">
  <div ng-controller="myCont">
    <p transclude-directive>Hello World!
    <input type="text" />
    </p>
  </div>
  
</div>

JavaScript

angular.module('myApp', [])
.controller("myCont", function($scope){
	$scope.name="ssssss"
})

.directive('transcludeDirective', function() {
  return {
    //transclude:true,
    transclude:'element',
    scope:{},
    restrict: 'AE',
    replace: true,
    link: function(scope, elem, attrs, ctrl, transclude) {
    	console.log(transclude);
      transclude(function(clone) { //'clone' is the clone of        
        //the directive element
        console.log(clone);
        clone.css('background-color', 'yellow');
        elem.after(clone); //append the clone
      });
    },
    template: '<div ng-transclude>{{name}}</div>'
  }
});