AngularJS Custom Transclusion


I’ve found that the built in Angular transclusion directive to be a bit of a pain to use. Although ng-transclude is an easy way to go, it can start to get a bit messy when you start nesting directives and scopes. Recently I have been restructuring an app to be more component driven (I highly reccomend this approach), breaking elements into directives was the obvious way to go.

After some experimenting I found ng-transclude was restrictive and quite frankly; not fit for purpose. After a lot of stress and some tears I’ve found its better to do this manually in each directive; using a custom transclusion function giving more control over how the transclusion will work. This allows you to think more about the general nature of your directives, taking into account whether to use a shared or isolated scope and lets you chose which scope should be transcluded.

Other Resources