When to use transclude 'true' and transclude 'element' in Angular?

Question

When should I use transclude: \'true\' and when transclude: \'element\' ? I cant find anything about transclude: \'element\' in the an

Answer 1

The best way of think about transclusion is a Picture Frame.A picture frame has its own design and a space for adding the picture.We can decide what picture will go inside of it.

When it comes to angular we have some kind of controller with its scope and inside of that we will place a directive that supports transclusion. This directive will have it’s own display and functionality . In non-transluded directive, content inside the directive is decided by the directive itself but with transclusion,just like a picture frame,we can decide what will be inside the directive.

angular.module("app").directive('myFrame', function () {
    return {
        restrict: 'E',
        templateUrl:"frame.html",
        controller:function($scope){
          $scope.hidden=false;
          $scope.close=function(){
            $scope.hidden=true;

          }
        },
        transclude:true


    }

});

Content inside the directive

  

     
  
  

    /*frame content goes here*/
  

Call Directive

    
      My Frame content
    
  

Example