Question

在我的Angular应用程序中，我尝试构建一个包含text类型的简单输入字段的自定义元素。我在这里建了这个：http://plnkr.co/edit/ulhMuK26JZMfuERG7ch7?p=preview

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

我整天都被这一切困扰了。有谁知道为什么这不会更新（以及如何更新它？）

HTML：

<form name="myForm">
  <text-field ng-model="myValue"></text-field>
</form>

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;
    }
  };
});

Answer 1

从视图更新时，

ng-model变为$dirty，而不是从模型端更新。这是一个简单的例子来说明：

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

键入第一个<input>会更改ngModel，但不会将其设置为$dirty。当然，输入第二个<input name="ngModel">会将其设置为$dirty。

这就是你的情况。您的指令的ngModel只能通过更改绑定的模型来更新，即myValue，它在指令中绑定到scope.value。

重要的是要记住ngModel本身并不设置$dirty - 实现使用ngModel的输入控件的指令，如内置{{1}控件或您的自定义输入控件，可以调用<input>，或者更常见的是调用$setDirty（触发$setViewValue）。

输入控件实现者使用

$setDirty来设置$setViewValue上的值以响应DOM中的更改。

这是一个自定义输入控件的概念性示例 - 一个增加计数的简单按钮：

ngModel

Demo

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

为什么ngModelCtrl。$ dirty在我的指令中没有更新？

1 个答案: