angularjs - 検証、ngModel、および ngClass を含む AngularJS ディレクティブ テンプレートは、テンプレートがラップされている場合にのみ機能します

Question

Misko の回答をテンプレートとして使用して、Twitter ブートストラップ フォーム コントロールのテンプレートを提供するディレクティブを実装しました。

このPlunker の例には 2 つのディレクティブがありますが、最初のディレクティブにはテンプレートに追加の div ラッパーがあることを除いて同じです。

「has-error」クラスが最初のディレクティブにのみ適用され、2 番目のディレクティブには適用されないのはなぜですか? ラッピング div を 2 番目のディレクティブ テンプレートに追加すると、突然機能し始めます。このラッパーの重要性は何ですか?

また、検証クラス ng-pristine ng-invalid ng-invalid-required などがフォーム要素に正しく適用されていることもわかりますが、ディレクティブ テンプレートの最上位の div にも適用されているのはなぜですか?

Answer 1

何が問題なのか推測すると、Angular は検証クラスを最初のラッピング div に追加しています。最初のものでは、これは単なる空のラッパーであり、追加の検証クラスは問題を引き起こしません。2 つ目は、最初のラッパー div に class 属性と ng-class 属性の両方が既にあり、Angular で検証クラスを追加すると、ng-class ルールが上書きまたは競合するため、それらが実行されず、'has-error' が適用されません。ただし、ラッパー div を維持するよりも良い解決策があるかどうかはわかりません。