jquery-mobile - AngularJS を使用した Jquery Mobile フォームの検証

Question

JQM 自体は検証フレームワークを提供しないため、Jquery Molbile プロジェクトでフォーム検証に angularJS を使用しています。たとえば、次のマークアップを考えてみましょう。

<form ng-app name="form">

    Marital status:
    <select  ng-model="maritalStatus" required>
        <option value="">Select...</option>
        <option value="M">Married</option>
        <option value="UM">Unmarried</option>
    </select>

</form>

有効な状態と無効な状態にそれぞれ緑と赤の境界線が必要なため、次の CSS があります。

.ng-valid{
border: 1px solid green;
}

.ng-invalid{
border: 1px solid red;
}

<select/>上記の CSS は、JQMコンポーネントに目に見える影響を与えません。

ここで、AngularJS は関連するスタイル クラスを適切に追加しているようです。

この問題の原因は、何らかの理由で JQM が他のマークアップを使用してコンポーネントを再レンダリングすることです。これは JQM のバグではありません (ただし、非常に悪い方法かもしれません!)、これが JQM の仕組みです。

この問題の最善の回避策は何ですか?