![\"angularjs\"](\"\/blog\/wp-ttn-blog\/uploads\/2014\/12\/angularjs.jpg\")
<\/p>\n<\/p>\n
Wait, Trans<\/strong> .. what? Yes, Transclusion<\/strong> is the Now writing directives is not a very complex exercise, infact it is quite simple now if you first have a look at the improving<\/strong>(sort of) documentation. But when writing directives in order to create Re-usable components, then we have to consider a lot of stuff for functionality and customization for our component to be successful. And nothing says customizable when the user can use his own markup inside our component.<\/p>\n In simple words transclusion<\/strong> is the ability to wrap user’s markup by our own template(markup). Lets say we are creating some component in which the user can hack in his own markup with his own scope variables and values. The markup they provide will co-exist in the component we wrote!<\/p>\n Confused, lets consider an example:<\/p>\n [js] and our [js] and we’ll be using it like this:<\/p>\n [js] In the above snippets the two important things to notice are The Since its You must have noticed that we really don’t have any Thus the transcluded element does not refer to the scope of our directive, as if it didn’t exist. It would always refer to the scope in which the directive is used.<\/p>\n Thus even though so if the user’s end looks like this:<\/p>\n [js] \/\/The markup \/\/ Final rendered markup [\/js]<\/p>\n The above is a very simple way to understand Hope you enjoyed this little look at Transclusion<\/strong> in AngularJS.<\/p>\n Happy Transcluding \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":" In simple words transclusion is the ability to wrap user’s markup by our own template(markup). Lets say we are creating some component in which the user can hack in his own markup with his own scope variables and values. The markup they provide will co-exist in the component we wrote!<\/p>\n","protected":false},"author":85,"featured_media":14740,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":2},"categories":[1],"tags":[955,1155,1480],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/14737"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/85"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=14737"}],"version-history":[{"count":0,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/14737\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media\/14740"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=14737"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=14737"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=14737"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}mysterious<\/code>, big and most intimidating<\/code> of words when writing AngularJS<\/code> Components. AngularJS, being so powerful and all provides a lot of ways to do many things.<\/p>\nSo what is it exactly<\/h2>\n<\/p>\n
\nreturn {
\n\trestrict: "E",
\n\ttemplateUrl: "template.html",
\n\ttransclude: true,
\n\tscope: {},\t\/\/lets have some isolation
\n\tlink: function(scope, attrs) {
\n\t\tscope.favoriteCharacter = "Tyrion Lannister;
\n\t}
\n}
\n[\/js]<\/p>\ntemplate.html<\/code> looks like this:<\/p>\n
\n<div>
\n\t<div ng-transclude> This will be replaced by user markup <\/div>
\n\t<div class="my-own-component"> {{favoriteCharacter}} is awesome.<\/div>
\n<\/div>
\n[\/js]<\/p>\n
\n<game-of-thrones>
\n\t<!–
\n\t\tThis following markup will replace the div with
\n\t\tng-transclude directive
\n\t–>
\n\t<div>What’s you problem Oberion?, {{oberion}} <\/div>
\n<\/game-of-thrones>
\n[\/js]<\/p>\ntransclude: true<\/code> in our directive and ng-transclude<\/code> in our template markup.<\/p>\ntransclude<\/code> option in our directive tells angular that this directive will be using transclusion<\/em> (As per the docs you should really use this option when you require transclusion capabilities), the second part in the template markup tells the directive that this part is to be replaced.
\nSimple huh! \ud83d\ude09<\/p>\nBut, what about scope?<\/h2>\n<\/p>\n
AngularJS<\/code> it really isn’t complete without scope<\/code> talks. Transclusion does some trickery with the scope.<\/p>\noberion<\/code> in our directive scope, so how will this work. Well scope<\/code> with transclusion works a bit differently because since end user’s markup is embedded it would require the context of the user’s scope tree and not the isolated scope of our directive. <\/p>\noberion<\/code> is not in our isolated scope, it wouldn’t matter because it will always be picked from outer context. Template markup other than the transcluded section will continue to use the isolated scope.<\/p>\n
\n\/\/ The Controller
\n\/\/ …
\n$scope.oberion = "The mountain makes my head explode";
\n$scope.favoriteCharacter = "Khaleesi";
\n\/\/ …<\/p>\n
\n<game-of-thrones>
\n\t<!–
\n\t\tThis following markup will replace the div with
\n\t\tng-transclude directive
\n\t–>
\n\t<div>What’s you problem Oberion?, {{oberion}} <\/div>
\n\t<\/game-of-thrones>
\n\/\/ …<\/p>\n
\n<game-of-thrones>
\n\t<div>What’s you problem Oberion?, The mountain makes my head explode.<\/div>
\n\t<div class="my-own-component"> Tyrion Lannister is awesome.<\/div>
\n<\/game-of-thrones><\/p>\ntransclusion<\/code>, The basics are really easy to grasp and implement even though the term sounds very complicated<\/code> and scientific<\/code>.<\/p>\n