javascript - 如何防止模型失效？

Question

我是最佳实践的坚定拥护者，尤其是在 Angular 方面，但我无法使用全新的 $validators 管道功能。

案例非常简单:1 个输入由使用 $parser、$formatter 和一些 $validators 的指令增强:

<input name="number" type="text" ng-model="number" number> 

这是(简化的)指令:

myApp.directive('number', [function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    /*
     * Must have higher priority than ngModel directive to make
     * number (post)link function run after ngModel's one.
     * ngModel's priority is 1.
     */
    priority: 2,
    link: function($scope, $element, $attrs, $controller) {
      $controller.$parsers.push(function (value) {
        return isFinite(value)? parseInt(value): undefined;
      });

      $controller.$formatters.push(function (value) {
        return value.toString() || '';
      });

      $controller.$validators.minNumber = function(value) {
        return value && value >= 1;
      };

      $controller.$validators.maxNumber = function(value) {
        return value && value <= 10;
      };
    }
  };
}]);

I made a little plunk to play with :)

我试图实现的行为是:考虑到存储在作用域中的初始值是有效的，防止它在用户输入无效时被破坏。保留旧的直到设置新的有效的。

注意:在 Angular 1.3 之前，我可以直接在 $parser/$formatter 中使用 ngModelController API 来做到这一点。我仍然可以用 1.3 做到这一点，但那不是“Angular 方式”。

NB2:在我的应用程序中，我并没有真正使用数字，而是 quantities .问题依旧。

Answer 1

看起来您希望在验证后进行一些解析，将模型设置为最后一个有效值而不是从 View 派生的值。但是，我认为 1.3 管道以相反的方式工作:解析发生在验证之前。

所以我的回答是按照您在 1.2 中的做法进行操作:使用 $parsers 设置验证键并将用户的输入转换回最新的有效值。

以下指令执行此操作，并在指令中指定了一组按顺序运行的验证器。如果前面的任何验证器失败，则后面的验证器不会运行:它假定一次可能发生一个验证错误。

与您的问题最相关的是，它维护模型中的最后一个有效值，并且仅在未发生验证错误时才覆盖。

myApp.directive('number', [function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    /*
     * Must have higher priority than ngModel directive to make
     * number (post)link function run after ngModel's one.
     * ngModel's priority is 1.
     */
    priority: 2,
    link: function($scope, $element, $attrs, $controller) {
      var lastValid;

      $controller.$parsers.push(function(value) {
        value = parseInt(value);
        lastValid = $controller.$modelValue;

        var skip = false;
        validators.forEach(function(validator) {
          var isValid = skip || validator.validatorFn(value);
          $controller.$setValidity(validator.key, isValid);
          skip = skip || !isValid;
        });
        if ($controller.$valid) {
          lastValid = value;
        }
        return lastValid;
      });

      $controller.$formatters.push(function(value) {
        return value.toString() || '';
      });

      var validators = [{
        key: 'isNumber',
        validatorFn: function(value) {
          return isFinite(value);
        }
      }, {
        key: 'minNumber',
        validatorFn: function(value) {
          return value >= 1;
        }
      }, {
        key: 'maxNumber',
        validatorFn: function(value) {
          return value <= 10;
        }
      }];
    }
  };
}]);

这可以在 http://plnkr.co/edit/iUbUCfJYDesX6SNGsAcg?p=preview 上看到