如何使用AngularJS范圍觀察JQuery選擇器。$ watch（）方法

Question

我正在編寫一個指令，需要注意使用特定類更新的元素，例如.ng-invalid 。 如您所知， .ng-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
    }
})

小提琴 。 在小提琴中，我在第一個input添加了ng-minlength="2" 。 在該字段中鍵入兩個字符以查看$ watch觸發器。

Answer 2

您的目的是否足以觀察FormController的$invalid屬性？ 這將通知您表單的整體無效狀態的更改，例如：

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