AngularJSスコープを使用してJQueryセレクタを表示する方法$ watch（）メソッド

Question

特定のクラス（たとえば.ng-invalid）で更新される要素を監視する必要があるディレクティブを作成しています。ご存知のように、無効なフォーム要素には.ng-invalidが追加されています。

クラスが追加または削除されたかどうかを判断するには、これらの要素を監視する必要があります。

どうすればこの問題を解決できますか？あなたの目的は、FormControllerの$invalid属性を監視するために、事前

Answer 1

あなたは$(".ng-invalid")の長さ取得する機能を見ることができ$：

scope.$watch(function() { 
    return $(".ng-invalid").length; 
}, function (newVal, oldVal) { 
    if(newVal !== oldVal) { 
     console.log('changed!', newVal, oldVal); 
     // do your changes here 
    } 
}) 

Fiddleを。フィドルでは、最初にinputにng-minlength="2"を追加しました。そのフィールドに2文字を入力して、$ watchトリガーを表示します。

Answer 2

で

おかげで、それは十分だろうか？これは、例えば、フォームの全体的な無効状態への変更を通知します：

// Somewhere in your directive; formCtrl is the FormController 
scope.$watch(function() { 
    return formCtrl.$invalid; 
}, function(isInvalid, wasInvalid) { 
    // ... 
});