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

Question

对于普通的HTML，我使用W3C validation service，但它对Angualr指令有异议。

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

我如何发现这些问题？

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

Answer 1

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

缩进会阻止像开放标记之类的东西，IDE会帮助在属性上打开引号，这可能是最有可能导致问题的两个问题。

Answer 2

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捕获一个页面的DOM（如果你使用的是AngularJS，你最有可能拥有它）：

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

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

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