When inside a transclusion, using replaceWith in a directive compile function doesn't work.

[passelin]

I'm using AngularJS 1.1.0 and I'm trying to modify the template structure of a directive to take some modifying attributes into consideration and I'm using .replaceWith to do so as I want to replace the original element.

That works fine until I use that directive inside another directive that uses ng-transclude. I suspect there's an issue related to the cloning done by the transclusion but I may also be doing something wrong.

Here's a fiddle to illustrate the problem: http://jsfiddle.net/passelin/Qt9Ey/

Thanks

[refactorthis]

+1 also having this problem. Were you able to find a fix?

[ospatil]

Not exactly a fix, but you can find more details on this thread - https://groups.google.com/d/msg/angular/GI50hYNe2yQ/wn-SqEuDWTIJ

[btford]

As part of our effort to clean out old issues, this issue is being automatically closed since it has been inactivite for over two months.

Please try the newest versions of Angular (1.0.8 and 1.2.0-rc.1), and if the issue persists, comment below so we can discuss it.

Thanks!

[ladrower]

I faced the same issue when used tElement.replaceWith() method within directive compile function that was used inside ui-view directive. It can be unexpected because using such directive in main index.html without transclusion does not bring any issues.

Actually the replaced content was rendered instead of directive's root element, but it was not compiled at all ! No interpolation, no binding was done in result.

The solution was not to replace, but to append the desired DOM to current directive' root within compile function and do actual DOM replacement in linking function.

But this is not the desired hack, as it lowers performance if directive used along side with ng-repeat.

Used Angular 1.2.5

[pope]

+1 to seeing this problem, even though doing this in `link' works.

[TheLostBrain]

I ran across a solution that allows you to use replaceWith and keep it in 'compile'.

Just wrap the transcluded directive in another element... span, div, etc. and it just works.

While it does work, the purpose of the extra element is not immediately obvious to someone else working with the code. So maybe use a more descriptive wrapping element? ?

And... it would probably make sense to put a note in the comments of the directive that implements the replaceWith about the issue of using in it in conjunction with transclusion.

Of course if the performance benefit of keeping it in compile is not great it may just be better to move it to 'link' as others have suggested.

This workaround was originally suggested by Pete Bacon Darwin:
https://groups.google.com/d/msg/angular/GI50hYNe2yQ/6ObjlKmB9qMJ

Edit - It might be worth noting that this issue still persits in Angular 1.2.22

[TheLostBrain]

I've since opened another issue for this: #8710

[caitp]

yes, it was linked from this one automatically =P