在angular指令中观察ngModel。$ invalid的变化

Question

我有一个指令用自定义输入控件替换select元素。这是它的简化版本：

angular.module('MyModule', []).directive('reflector', function($timeout) {
    return {
        require: 'ngModel',
        link: function(scope, element, attrs, ngModel) {
            element.insertAfter('<input type=text id="new-' + attrs.id + '" />');
            element.hide()
        }
    };

});

我希望这个自定义输入控件能够反映原始select元素的有效/无效状态，即在base元素无效时添加ng-invalid类。

有没有办法观察ngModel.$invalid的变化？我知道我可以做scope.$watch(attrs.ngModel, ...)，但这给了我模型数据，而不是表单元素的有效/无效状态..

Answer 1

您可以观看ngModelController：

中的所有属性

$scope.$watch(function(){return ngModel.$invalid;},function(newVal,oldVal){ ...

ngModel将以下css类设置到元素上：ng-valid，ng-invalid，ng-dirty，ng-pristine。