Today I am going to explain about transclusion. It is very interesting topic and also very useful for code reusability. Think it of as a picture frame. You can put whatever pictures you like inside the frame. In our case frame is nothing but transcluded directive and picture is the template we want to put inside our directive. Let us understand this with following diagram.
Inside controller's scope we will have a transcluded directive that will have its own functionality.Inside directive we get to choose the content.Take a example where I ask a question that will be same for everyone but answers will be different.Lets look at the following code.
Here inside controller myCtrl, I have created a directive displayBox with property transclude.displayBox.html is our frame that will be same for everyone.So I am asking my question here and giving it some styling.This is going to same for everyone.In index.html inside element<display-box> I am writing a template that will keep changing.Notice ng-transclude inside displayBox.html.Template inside <display-box> will come inside div element with ng-transclude attribute.Thats all folks!.
Now Lets look at the code we were already working on.
So in this code I want to add user droid or say Transformer and I just want to write the partners this transformer is working with. So this will have same body panel as batman and ironman and same functionality but content will be different.So now you see the scope of using transclusion? I want you to try it yourself and if you are really stuck check out following working example.
Next I am going to explain about Structural directive which is again very important concept!If you have any question you can write it in comment or mail me at omitewary@gmail.com
 |
| Trnasclusion concept |
Here inside controller myCtrl, I have created a directive displayBox with property transclude.displayBox.html is our frame that will be same for everyone.So I am asking my question here and giving it some styling.This is going to same for everyone.In index.html inside element<display-box> I am writing a template that will keep changing.Notice ng-transclude inside displayBox.html.Template inside <display-box> will come inside div element with ng-transclude attribute.Thats all folks!.
Now Lets look at the code we were already working on.
So in this code I want to add user droid or say Transformer and I just want to write the partners this transformer is working with. So this will have same body panel as batman and ironman and same functionality but content will be different.So now you see the scope of using transclusion? I want you to try it yourself and if you are really stuck check out following working example.
Next I am going to explain about Structural directive which is again very important concept!If you have any question you can write it in comment or mail me at omitewary@gmail.com
