angularjs - 观察角度指令中 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()
        }
    };

});

我希望这个自定义输入控件能够反映原始选择元素的有效/无效状态，即在基本元素无效时添加 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。