Remove helper HTML comments in Angular JS?

Question

Is there a way to prevent Angular from creating \"helper\" HTML comments? For example,

Wi

Answer 1

From Angular Doc:

Disabling Debug Data

By default AngularJS attaches information about binding and scopes to DOM nodes, and adds CSS classes to data-bound elements:

As a result of ngBind, ngBindHtml or {{...}} interpolations, binding data and CSS class ng-binding are attached to the corresponding element.

Where the compiler has created a new scope, the scope and either ng-scope or ng-isolated-scope CSS class are attached to the corresponding element. These scope references can then be accessed via element.scope() and element.isolateScope().

Tools like Protractor and Batarang need this information to run, but you can disable this in production for a significant performance boost with:

myApp.config(['$compileProvider', function ($compileProvider) {
  $compileProvider.debugInfoEnabled(false);
}]);

If you wish to debug an application with this information then you should open up a debug console in the browser then call this method directly in this console:

angular.reloadWithDebugInfo();

The page should reload and the debug information should now be available.

For more see the docs pages on $compileProvider and angular.reloadWithDebugInfo.

Answer 2

You are able to remove the contents of these angular comments, as well as some of the classes angular attaches to elements (e.g ng-scope) by adding this config to your angular module:

myApp.config(['$compileProvider', function ($compileProvider)
{
    $compileProvider.debugInfoEnabled(false);
}]);

According to the angular.js docs, it is actually good to do this in production and should result in a performance boost.

Answer 3

The comments are crucial to how Angular handles certain elements. Removing them is not currently an option. What issues are you having with it?