Angular transclusion pitfalls
So I have been delving into the world of angular as of late and have created my first set of cascading directives that transclude each other. This capability is one thing that makes angular such a powerful app framework. It gives you the ability to create a directive that you can put your own html in with a transclusion. In that html you can call another directive that also does some transclusion and continue your cascade. These children directives can also require their parents in order to be able to make sure they are not called out of context.
This multi tranclusion is extremely powerful and allows for a lot of customization within the file. However there is a lot of room for problems with this methodology.
One major issue I ran into was passing scope from the called directive down to the transcluded html template. It seems a change was made in angular a few versions ago that prevents some scope leak by preventing a directive template from passing its scope down to its transcluded child. This issue caused me no small amount of grief and several hours of work and rework before I finally found this useful github bug filed for this very issue. https://github.com/angular/angular.js/issues/7874.
The inject directive here solved this problem completely for me to pass the scope of one directive down one level to its child. As a forewarning this cannot be used on multi levels as it sits. In other words you could not call inject on a parent directive and then again on its child.
The other major issue I ran into involved the performance of rendering my transcluded directive templates to the DOM. This was primarily due to the existence of an ng-repeat as part of one of the directives. I found three great ways to increase performance.
1. One way bind elements where ever possible. A lot of items in a repeated list do not need to be two way bound and by removing the watchers it significantly decreases the speed to render.
2. Remove conditional checks where able. Directives like ng-if, ng-show, and ng-hide really slow down rendering because for each item there must be a pause to check to see if the condition is met before moving on to render more.
3. Use “track by” on your ng-repeat declaration. This is especially important if there is any paging or rerendering of this list. Without this angular virtualizes a reference to each repeated item and has to generate some reference value. If each item comes back with a unique identifier then angular does not need to do any extra work to refer to them.
These are just a few of the many discoveries I have made from my work with angular thus far so I hope they prove useful to someone else out there.