如何使用AngularJS的scope来监视JQuery选择器

How To Watch a JQuery Selector Using AngularJS scope.$watch() Method

本文关键字：监视 JQuery 选择器 scope 何使用 AngularJS      更新时间：2023-09-26

我正在编写一个指令，需要监视使用特定类更新的元素，例如.ng-invalid。如您所知，.ng-invalid被添加到无效的表单元素中。

我需要观察这些元素，以确定类是否被添加或删除。

我怎样才能做到这一点?

Thanks in advance

你可以$watch一个函数，得到$(".ng-invalid")的长度:

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

小提琴。在本文中，我将ng-minlength="2"添加到第一个input中。在该字段中输入两个字符以查看$watch触发器

观察FormController的$invalid属性是否足以满足您的目的?这将通知您表单的整体无效状态的更改，例如:

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