AngularJS : ng-if and ng-repeat not working after custom transclusion

Question

I am attempting to do custom transclusion of a directive in angularJS as I need to transclude two separate elements into two separate locations.

The issue is that whilst some directives carried over on the transcluded content work such as ng-bind others such as ng-if or ng-repeat do not, even after recompiling the transcluded elements with the correct scope.

Example: http://jsbin.com/menakapoma/1/edit?html,js,output

As you can see in the example the ng-bind works but the ng-if does not even though they are both on the same scope and accessing the same value. Neither the true or false state of the ng-if works.

I believe this is because the ng-if directive gets transcluded as a comment, however even if I set the priority of the transcluding directive to 9999 and perform it in the pre-linkage function it still does not work.

Does anyone know how to get these directives working?

Answer 1

The issue is that no matter what by the time the transclude function executes the nested directives have already been compiled and replaced with comments.

I have managed to achieve this by completely foregoing the transclude options, and manually requesting the template via $templateRequest.

I specify a compile function which replaces the element with a comment placeholder to ensure nothing is rendered during the request.

In the linkage function I manually compile the template and then replace directive's element with it.

See the updated example here: http://jsbin.com/rocedarono/3/edit?html,js,console,output

It certainly doesn't feel like the cleanest/optimal solution and I am open to any other solutions that can do it a little nicer. Especially as any DOM events have to be bound to after the $templateRequest promise is resolved and checked for existence before removal on the $destroy event to ensure it resolved beforehand.