angularjs - $watch 在指令中只触发一次

Question

我是 angular js 的新手，所以请有人帮助我。我在这里有我的模板:

<form ng-model="signup" form-valid>
    <input type="text" name="username" ng-model="signup.username">{{signup}}
</form>

我的指令是这样的:

app.directive("formValid",function(){

 return {
    restrict:"A",
    require:"ngModel",
    link:function(scope,element,attrs){
          scope.$watch(attrs.ngModel,function(newValue){
              if(newValue){
                 console.log(newValue);
              }
          });
       }
   }});

当我在文本框中输入某个值时，模型会发生变化，因此应该触发“$watch”。但是在这里，“$watch”仅在我第一次在文本框中输入任何值时触发一次。谢谢进步。

Answer 1

当您使用 ngModelController ，观察模型变化的标准方法是创建 formatter :

link: function(scope, element, attrs, ngModelCtrl) {
    ngModelCtrl.$formatters.push(function(value) {
        // Do something with value
        return value;
    });
}

请记住，仅在直接更改模型时才会触发格式化程序。如果更改来自 UI(即用户更改某些内容)，则会触发解析器。所以你可能也需要这样做:

ngModelCtrl.$parsers.push(function(value) {
    // Do something with value
    return value;
});

Working Plunker

建议你阅读 ngModelController文档，以便您准确了解这些管道的工作原理。

但是，如果您只想在模型更改时收到通知(您不需要或不需要格式化或解析任何内容)，那么您可以做一些更简单的事情:

scope: { model: '=ngModel' },
link: function(scope) {
    scope.$watch('model', function(value) {
        // Do something with value
    });
}

Working Plunker

但是鉴于您的指令名称， formValid ，我认为使用 ngModelController 是正确的做法。

更新

值得一提的是 ngModelController 可以说有一个缺点:它不能很好地处理“引用”类型(例如数组、对象)。更多详情请见 here .