angularjs - 带有验证、ngModel 和 ngClass 的 AngularJS 指令模板仅在模板被包装时才有效

Question

使用Misko 的答案作为模板，我实现了一个指令，该指令为 twitter 引导表单控件提供模板。

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

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

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

Answer 1

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