Question

我制作了一个指令，旨在使用ngModel指令附加到元素。如果模型的值匹配，则应将值设置为先前的值。在我的例子中，我正在寻找“foo”，并将其设置回上一个，如果这是输入的内容。

我的单元测试在这方面很好，因为他们只关注模型值。但是在实践中，当“回放”触发时，DOM不会更新。我们在这里最好的猜测是设置old == new可以防止脏检查发生。我逐步完成了$ setViewValue方法，它看起来正在做它应该做的事情。但是，在我设置新值之后显式调用ngModel。$ render（）之前，它不会更新DOM（以及您在浏览器中看到的内容）。它工作正常，但我只想看看是否有更合适的方法。

代码在下面，here's a fiddle具有相同的内容。

angular.module('myDirective', [])
    .directive('myDirective', function () {
    return {
        restrict: 'A',
        terminal: true,
        require: "?ngModel",
        link: function (scope, element, attrs, ngModel) {
            scope.$watch(attrs.ngModel, function (newValue, oldValue) {
                //ngModel.$setViewValue(newValue + "!");   

                if (newValue == "foo")
                {
                    ngModel.$setViewValue(oldValue);   
                    /* 
                        I Need this render call in order to update the input box; is that OK?
                        My best guess is that setting new = old prevents a dirty check which would trigger $render()
                    */
                    ngModel.$render();
                }
            });
        }
    };
});

function x($scope) {
    $scope.test = 'value here';
}

Answer 1

我们最好的猜测是设置旧的== new可防止脏检查发生

仅当侦听的表达式的值发生更改时，才会调用watcher侦听器。但是，由于您将模型更改回其先前的值，因此不会再次调用它，因为它的值根本没有变化。但是，要小心：在观察者内部更改属性的值，监视同一属性可能会导致无限循环。

然而，在我设置新值后显式调用ngModel。$ render（）之前，它不会更新DOM（以及您在浏览器中看到的内容）。

这是对的。 $setViewValue将模型值设置为视图更新，但您需要调用$render以根据（新）模型值有效地呈现视图。查看this discussion了解详情。

最后，我认为你应该以不同的方式处理你的问题。您可以使用$parsers的{{1}}属性来验证用户输入，而不是使用观察者：

NgModelController

我更改了您的jsFiddle script以使用上面的代码。

link: function (scope, element, attrs, ngModel) {
  if (!ngModel) return;

  ngModel.$parsers.unshift(function(viewValue) {
    if(viewValue === 'foo') {                 
      var currentValue = ngModel.$modelValue;
      ngModel.$setViewValue(currentValue);
      ngModel.$render(); 
      return currentValue;
    }
    else 
      return viewValue;
  });
}

angular.module('myDirective', [])
.directive('myDirective', function () {
  return {
    restrict: 'A',
    terminal: true,
    require: "?ngModel",
    link: function (scope, element, attrs, ngModel) {
      if (!ngModel) return;

      ngModel.$parsers.unshift(function(viewValue) {
        if(viewValue === 'foo') {                 
          var currentValue = ngModel.$modelValue;
          ngModel.$setViewValue(currentValue);
          ngModel.$render(); 
          return currentValue;
        }
        else 
          return viewValue;
      });
    }
  };
});

function x($scope) {
  $scope.test = 'value here';
}

AngularJS - 在更改模型值的指令中，为什么我必须调用$ render？

1 个答案: