$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。

Answer 2

一种解决方案是使用 ngModel，如下例所示。

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

编辑：最快的解决方案是关注 Blackhole 的评论，并通过添加 true 将您的手表更新为深度手表。这是因为您正在查看 signup 属性，但模型值 username 是注册的属性。 deep watch 将用于监视属性。

直接使用ngModel，而不是通过attrs，或使用格式化程序或解析器（Michaels 的回答中详述，我认为这是一个更好的解决方案）。