When to use transclude 'true' and transclude 'element' in Angular?
Solution 1
From AngularJS Documentation on Directives:
transclude
- compile the content of the element and make it available to the directive. Typically used with ngTransclude. The advantage of transclusion is that the linking function receives a transclusion function which is pre-bound to the correct scope. In a typical setup the widget creates an isolate scope, but the transclusion is not a child, but a sibling of the isolate scope. This makes it possible for the widget to have private state, and the transclusion to be bound to the parent (pre-isolate) scope.
true
- transclude the content of the directive.
'element'
- transclude the whole element including any directives defined at lower priority.
transclude: true
So let's say you have a directive called my-transclude-true
declared with transclude: true
that looks like this:
<div>
<my-transclude-true>
<span>{{ something }}</span>
{{ otherThing }}
</my-transclude-true>
</div>
After compiling and before linking this becomes:
<div>
<my-transclude-true>
<!-- transcluded -->
</my-transclude-true>
</div>
The content (children) of my-transclude-true
which is <span>{{ something }}</span> {{...
, is transcluded and available to the directive.
transclude: 'element'
If you have a directive called my-transclude-element
declared with transclude: 'element'
that looks like this:
<div>
<my-transclude-element>
<span>{{ something }}</span>
{{ otherThing }}
</my-transclude-element>
</div>
After compiling and before linking this becomes:
<div>
<!-- transcluded -->
</div>
Here, the whole element including its children are transcluded and made available to the directive.
What happens after linking?
That's up to your directive to do what it needs to do with the transclude function. ngRepeat
uses transclude: 'element'
so that it can repeat the whole element and its children when the scope changes. However, if you only need to replace the tag and want to retain it's contents, you can use transclude: true
with the ngTransclude
directive which does this for you.
Solution 2
When set to true, the directive will delete the original content, but make it available for reinsertion within your template through a directive called ng-transclude.
appModule.directive('directiveName', function() {
return {
template: '<div>Hello there <span ng-transclude></span></div>',
transclude: true
};
});
<div directive-name>world</div>
browser render: “Hello there world.”
Solution 3
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
<div class="well" style="width:350px;" ng-hide="hidden">
<div style="float:right;margin-top:-15px">
<i class="glyphicon glyphicon-remove" ng-click="close()" style="cursor:pointer"></i>
</div>
<div ng-transclude>
/*frame content goes here*/
</div>
</div>
Call Directive
<body ng-controller="appController">
<my-frame>
<span>My Frame content</span>
</my-frame>
</body>
Related videos on Youtube
Comments
-
LauroSkr over 3 years
When should I use
transclude: 'true'
and whentransclude: 'element'
? I cant find anything abouttransclude: 'element'
in the angular docs, they are pretty confusing.I would be happy if someone could explain this in simple language. What is the benefit of each option? What is the real difference between them?
This is what I have found :
transclude: true
Inside a compile function, you can manipulate the DOM with the help of transclude linking function or you can insert the transcluded DOM into the template using ngTransclude directive on any HTML tag.
and
transclude: ‘element’
This transcludes the entire element and a transclude linking function is introduced in the compile function. You can not have access to scope here because the scope is not yet created. Compile function creates a link function for the directive which has access to scope and transcludeFn lets you touch the cloned element (which was transcluded) for DOM manipulation or make use of data bound to scope in it. For your information, this is used in ng-repeat and ng-switch.
-
guy mograbi over 10 yearsI kinda missed the
made available to the directive
statement. The element is always available to the directive. can you please elaborate on this? -
Michelle Tilley over 10 years@guymograbi That sentence may make more sense as "made available to the directive via a function pre-bound to the correct scope."
-
Jasper almost 10 yearsThis does not answer the question at all (which was about the difference between
transclude: true
andtransclude: element
) -
kontur over 9 yearsAlso what would be interesting is what tags the browser DOM has after the directive, not what it reads...
-
Chester Rivas almost 9 yearsHow would one unit test a directive with transclude equal to 'element'? I'm currently struggling with that problem. I can't seem to access the element after it's been transcluded.
-
Shanmugaraja_K over 6 yearsStill i didn't understand the transclude, can you have any simple program to illustrate this?