Transclusion in Angular js

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.

<body ng-controller=”appController”>
<span>My Frame content</span>

Directive Template

<body ng-controller=”appController”>
<span>My Frame content</span>

angular.module("app").directive('myFrame', function () {
return {
restrict: 'E',

Source Code :

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s