观察角度指令中 ngModel.$invalid 的变化

我有一个指令替换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 元素的有效/无效状态，即当基本元素无效时添加 ng-invalid 类。

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

您可以从以下位置查看所有属性ng模型控制器 http://docs.angularjs.org/api/ng.directive%3angModel.NgModelController:

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

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