带有验证的 AngularJS 指令模板，ngModel 和 ngClass 仅在包装模板时有效

Question

使用 Misko's answer作为模板，我已经实现了一个指令，它为 Twitter Bootstrap 表单控件提供了一个模板。

这Plunker example有两个相同的指令，除了第一个指令在模板中有一个额外的 div 包装。

为什么 'has-error' 类只适用于第一个指令而不适用于第二个指令？如果我将包装 div 添加到第二个指令模板，它会突然开始工作。这个包装器有什么意义？

我还看到验证类 ng-pristine ng-invalid ng-invalid-required 等正确应用于表单元素，而且还应用于指令模板中的顶级 div，这是为什么呢？

Answer 1

猜测问题出在哪里 - Angular 正在将验证类添加到它可以的第一个​​包装 div 中。在第一个中，这个只是一个空的包装器，额外的验证类不会造成任何问题。第二个已经在第一个包装器 div 中同时具有 class 和 ng-class 属性，并且 Angular 添加验证类会覆盖 ng-class 规则或与 ng-class 规则冲突，导致它们不运行并且不应用“has-error”。不过，我不确定是否有比保留包装器 div 更好的解决方案。