Javascript 为什么在我的指令中ngModelCtrl.$dirty不更新？

在我的Angular应用程序中，我试图构建一个自定义元素，其中包含一个简单的文本类型输入字段。我在这里建造了这个：

这个很好用。但是，当我在输入字段中输入和删除值时，ngModelCtrl.$dirty和ngModelCtrl.$valid从不更新，尽管ngModelCtrl.$viewValue会更新

我整天都被这件事难住了。有人知道为什么不更新（以及如何使其更新）吗

HTML:

JavaScript:

angular.module('customControl', []).directive('textField', function() {
  return {
    restrict: 'E',
    require: '?ngModel',
    scope: {
      value: '=ngModel'
    },
    template: '<div>' +
              '    <input name="myWidget" ng-model="value" required />' +
              '    <div>ngModel: {{ctrl}}</div>' +
              '</div>',
    link: function(scope, element, attrs, ctrl) {
      scope.ctrl = ctrl;
    }
  };
});

angular.module（'customControl'，[]）.directive（'textField'，function（）{
返回{
限制：'E'，
要求：“？ngModel”，
范围：{
值：'=ngModel'
},
模板：“”+
'    ' +
'ngModel:{{ctrl}}'+
'',
链接：函数（范围、元素、属性、ctrl）{
scope.ctrl=ctrl；
}
};
});

ng model

在视图（而非模型）侧更新时变为

$dirty

。下面是一个简单的例子来说明：

<input ng-model="foo">
<div ng-form="form1">
  <input name="ngModel" ng-model="foo">
</div>
{{form1.ngModel.$dirty}}

---

要了解如何实现自定义输入控件，请参阅Angular的

，ngModelController文档实际上就是我所遵循的内容。plunkr基于那里的示例。我尝试在

value

上的

$watch

中添加

ctrl.$setViewValue（newValue）

，但

$dirty

和

$valid

保持不变。请参阅@ChadJohnson，因为模型也已更新（我假定您没有更改绑定

值：“=ngModel”

？）-因此视图值与模型没有任何不同。绑定到

ngModel

不是一个好主意-您应该只

需要它并直接与它交互如果我删除
值：“=ngModel”
，我会在模板
中绑定什么（ng model=“？”）？绑定到某个内部范围变量并相应地设置指令的
ngModel
。或者更好的是，甚至不要在模板中使用
ngModel
，因为它会与指令之外的
表单进行交互（我认为Angular的bug）-只需使用
ng change（$event）
并从DOM@ChadJohnson,这就是
ng model
的美妙之处-指令的用户可以将
ng required
放在
元素上，它就可以正常工作了。当然，您也可以通过添加
$validator
强制执行此行为。。但这超出了问题的范围
<input ng-model="foo">
<div ng-form="form1">
  <input name="ngModel" ng-model="foo">
</div>
{{form1.ngModel.$dirty}}

.directive("incButton", function() {
  return {
    template: '<button ng-click="inc()">{{val}}</button>',
    require: "ngModel",
    link: function(scope, element, attrs, ngModel) {

      scope.inc = function() {
        scope.val++;
        ngModel.$setViewValue(scope.val);
      };

      ngModel.$render = function() {
        scope.val = ngModel.$isEmpty(ngModel.$viewValue) ? 0 : ngModel.$viewValue;
      };
    }
  };
});