帶驗證的AngularJS指令模板，ngModel和ngClass只適用於模板包裝

Question

使用Misko's answer作爲模板，我實現了一個爲twitter引導表單控件提供模板的指令。

這個Plunker example有兩個指令是相同的，除了第一個指令在模板中有一個額外的div包裝。

爲什麼'has-error'類只應用於第一個指令而不是第二個？ 如果我將包裝div添加到第二個指令模板，它突然開始工作。這個包裝的意義是什麼？

我還看到驗證類ng-pristine ng-invalid ng-invalid-required等被正確地應用於表單元素，但也是指令模板中的頂級div，爲什麼？

Answer 1

在猜測什麼是問題 - Angular將驗證類添加到第一個包裝div。在第一個中，這個只是一個空的包裝器，額外的驗證類不會引起任何問題。第二個在第一個包裝器div中已經具有class和ng-class屬性，並且Angular添加驗證類會覆蓋或衝突ng類的規則，導致它們不運行並且不會應用「has-error」。我不確定是否有更好的解決方案，而不僅僅是保持包裝div。