如何检测 AngularJs 中的无效 HTML（不匹配的标签）

Question

对于普通的旧 HTML，我使用 W3C validation service，但它反对 Angualr 指令。

我遇到了WARNING: Tried to load angular more than once 的问题，我阅读的一些可能的解决方案表明它是由格式错误的 HTML 引起的，特别是未封闭的标签。

如何检测此类问题？

显然，我已经检查过我没有直接包含 Angular 两次

Answer 1

Angular 不会“看到”你的原始 HTML

这里真正的诀窍是 JavaScript（以及 Angular）不能直接与您的 HTML 一起工作。它适用于页面的 DOM，它是从您的 HTML 创建的。

当浏览器creates a DOM from HTML 时，主要的事情之一就是“自动更正”HTML 中的任何错误。因此，Angular 甚至不会看到 HTML 中的错误——它只会看到生成的“自动更正”的 DOM。 （当然，您的 HTML 中的错误越多，就越有可能以某种方式自动更正导致您出现问题的内容。）

理论上，您可以将页面的 HTML 源代码与生成的 DOM 进行比较，以找出可能是错误的差异。在实践中，这将是一个很大的问题，并且容易报告大量误报。

那么，我们可以验证来自网站的 HTML 吗？

如果您想从网页验证您的 HTML 标记，最好的方法是安装您的支持良好的 HTML 验证器实例（如 W3C’s validator）并挂钩。

您可以使用一点 jQuery（如果您使用 AngularJS 很可能拥有）来捕获页面的 DOM：

var domString = $("html").prop("outerHTML");

然后，只需将该字符串作为输入发布到您最喜欢的验证器。

我认为您需要将此 DOM 字符串的验证与 HTML 的验证进行比较，因为原始 HTML 中的错误更有可能是您的问题所在。

Answer 2

我想说正确的缩进和一个好的 IDE 是你在这方面最好的工具 - 我个人使用 PHPStorm（WebStorm 也会这样做）进行我的 Angular 开发，默认情况下会突出显示角度属性的警告，但是以红色突出显示未关闭的标签/引号等错误

缩进可以防止打开标签之类的事情，IDE 可以帮助在属性上使用打开引号，这可能是最有可能导致问题的 2 个问题。