删除Angular JS中的辅助HTML注释

Remove helper HTML comments in Angular JS?

本文关键字：HTML 注释 Angular JS 删除      更新时间：2024-06-22

有没有办法阻止Angular创建"helper"HTML注释？例如，

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

将转变为类似的东西

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

我该如何阻止这种情况？我查看了Angular源代码，发现这些"助手"是由几乎每个指令中的无条件文档.createComment生成的，所以我想没有办法通过在提供程序或其他程序上使用配置设置来同时停止它们。但也许有一些自定义的Angular构建没有"助手"？我想我可以写一些Yeoman/Grunt任务，每当我构建一个新项目时，从Angular的源代码中删除/createComment-s。或者你们知道一把小提琴已经做到了？这也引出了我的最后一个问题：这些评论在某种程度上对Angular的正常运行至关重要吗？如果我删除它们，会不会在我的应用程序中造成某种不稳定？应该重写CSS并"处理它"吗？

注释对于Angular如何处理某些元素至关重要。删除它们目前不是一个选项。你对此有什么问题？

您可以通过将以下配置添加到您的angular模块中来删除这些angular注释的内容，以及一些angular附加到元素的类（例如ng-scope）：

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

根据angular.js的文档，在生产中这样做实际上很好，应该会提高性能。

来自角度文档：

禁用调试数据

默认情况下AngularJS附加有关绑定和作用域到DOM节点的信息，并添加CSS类到数据绑定元素：

由于ngBind、ngBindHtml或｛｛…｝｝插值，绑定数据和CSS类ng绑定被附加到相应的要素

如果编译器创建了一个新的作用域，则作用域和ng作用域或ng隔离作用域CSS类附加到相应的元素。然后可以通过element.scope（）和element.sisolateScope（）.

像Protractor和Batarang这样的工具需要这些信息才能运行，但是您可以在生产中禁用此功能以显著提高性能带有：

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

如果您希望使用此信息调试应用程序，则应该在浏览器中打开调试控制台，然后调用此方法直接在此控制台中：

angular.reloadWithDebugInfo();

页面应该重新加载，调试信息现在应该可获得的

有关更多信息，请参阅$compileProvider和角度重新加载调试信息

相关文章：