AngularJS leaves comments in HTML: is it possible to remove them?

Question

Does anyone knows if you can remove the angular comments that are left in html code?

For example: If I use ngRepeat and there are no items to repeat over, AngularJS leaves this :

<!-- ngRepeat: post in posts -->

Solution 1

This comment is a result of the element transclusion performed by ngRepeat. Looks like it's been happening nearly since the dawn of time (in angular terms) and will be created whenever a directive asks for element transclusion.

While you certainly could wipe it out with direct HTML manipulation, it's not a safe thing to do. Having read through the source, it suggests this comment is needed to continue compiling your HTML once the original ngRepeat element is removed. Additionally, in v1.2.0, ngRepeat adds more comments that are used to determine where repeated elements are placed.

To summarise:

• Angular doesn't let you remove this
• You could do it manually but you would most likely break angular
• To reiterate the comments, it seems a strange request to remove this comment in the first place - depending on your reasoning for doing this there may be better options for what you want to achieve.

Solution 2

Run this in your dev console to nuke the comments:

$("*").contents().filter(function(){ return this.nodeType == 8;}).remove();

Not a proper fix, but handy snippet while debugging.

Solution 3

$compileProvider.debugInfoEnabled(false);

But it can broke some plugins which have references on angular comments.

Comments

[Engineer]

Not at all a strange request -- when displaying elements laterally using inline-block, comments cause unwanted space where none should be displayed.

[shox]

i have strange issue of removing elements after drag & drop and the problem solved after removing comment creation line in ng repeat directive: clone[clone.length++] = document.createComment(' end ngRepeat: ' + expression + ' ');

[Ivan Chernykh]

"Not at all a strange request 2" - when you want to use css' :empty selector , your element will never be empty because of this comment inside

[wdev]

@Cherniv it's not the comment but the whitespace inside that causes the issue with :empty but it is still a valid reason

[windmaomao]

"Not at all a string request 3" - when you want to generate the final HTML without all ng-bind tag in classes and comments

[Fizzix]

"Not at all a strange request 4" - :first-child, :last-child and :nth-child CSS selectors are ruled out to be basically useless inside an ng-repeat since they will also match comment nodes..

[Andyrooger]

I should have crossed that out a lot earlier

[jtate]

"Not at all a strange request 5" - extra bytes going over the wire

[Andyrooger]

@jayoaK see the first comment on the question. All client side so shouldn't affect the wire.

[BernieSF]

"not at all strange request 5": it is visual pollution of the HTML code

[Arashsoft]

It does not add ng-scope as a class to elements. but those comments stay in the html. code.angularjs.org/1.5.5/docs/guide/production