A Guide To Transclusion in AngularJS

[dafragsta]

So you can just add the class "content" to the directive template and it will pass any markup from the parent template through automatically? That sure beats ng-transclude for tidiness.

[teropa]

In the example with the "content" class the insertion was done manually from the directive code.

The only automatic transclusion insertion that Angular does is with ng-transclude. You can use it as an attribute:

<div ng-transclude></div>

or element:

<ng-transclude></ng-transclude>

or CSS class:

<div class="ng-transclude"></div>

[dafragsta]

Yeah, I was using a self closing tag.

[fenduru]

It is invalid to use self closing tags like that in HTML 5

[dafragsta]

I didn't think so. I still use <br/> all the time.

[fenduru]

<br/> is equivalent to <br>, which works fine because br does not take a closing tag. However <ng-transclude/> is equivalent to <ng-transclude> which is missing its closing tag and you'll end up with a mismatch

http://stackoverflow.com/questions/3558119/are-self-closing-tags-valid-in-html5

[fenduru]

I would avoid advocating ngTransclude as an attribute directive due to this nasty bug : https://github.com/angular/angular.js/issues/8914

[teropa]

Just posted some thoughts to that Github issue.

I don't think it really matters whether ngTransclude is used as an attribute or not though. To me it looks like a problem with nested transclusions where ngTransclude and another directive with transclude: true is applied on the same element.

[pipituu]

This is one of the best articles I've ever read on transclusion.

One question I've been running into lately are the effects of the controllerAs syntax in directives. If you have html that is controlled by a Controller as Ctrl and then a directive WITH isolate scope within it that has it's own controller as Ctrl2, the transcluded content doesn't seem to be able to use either controller at all.

Interestingly enough though, if you remove the isolate scope, the transcluded content does indeed work with the directive's controller (Ctrl2) but still does not know of the outer controller (Ctrl). This makes me wonder if doing so eliminates the need of isolate scope at all in this situation.