在Angular JS中删除帮助HTML注释?

时间:2013-12-11 00:45:09

标签: javascript angularjs

有没有办法阻止Angular创建“帮助”HTML评论?例如,

<div ng-include="myTemplate"></div>

会变成类似

的东西
<!-- ngInclude: 'hurr-durr.html' -->
<div ng-include="myTemplate"></div>

如何阻止这种情况?我查看了Angular源代码,我看到这些“帮助器”是由几乎每个指令中的无条件document.createComment生成的,所以我想通过使用一个配置设置就无法一次性阻止它们。提供者什么的。 但也许有一些没有“助手”的自定义Angular构建? 我想我可以写一些Yeoman / Grunt任务,每当我建立一个新项目时,从Angular的源中删除/评论.createComment-s。或许你们知道一个小提琴已经做到了吗?而且,这引出了我的最后一个问题: 这些评论对Angular的正常运作至关重要吗?如果我删除它们,它会在我的应用程序中引起某种不稳定吗?应该只重写CSS并“处理它”吗?

3 个答案:

答案 0 :(得分:5)

评论对于Angular如何处理某些元素至关重要。目前不支持删除它们。你有什么问题吗?

答案 1 :(得分:1)

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.

答案 2 :(得分:0)

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.