如何防止模型无效？

我是最佳实践的坚定倡导者，尤其是在角度方面，但我无法使用全新的$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;
      };
    }
  };
}]);

我做了一个小玩意儿:) http://plnkr.co/edit/iUbUCfJYDesX6SNGsAcg?p=preview

我想要实现的行为是：考虑到存储在范围中的初始值是有效的，如果用户输入无效，请防止其被破坏。保留旧的，直到设置新的有效的。

注意：在 Angular 1.3 之前，我可以使用ngModelControllerAPI直接在$parser/$formatter。我仍然可以使用 1.3 做到这一点，但这不会是“角度方式”。

NB2：在我的应用程序中，我并没有真正使用数字，但是数量 https://github.com/gentooboontoo/js-quantities.问题还是一样。

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

所以我的答案是像在 1.2 中那样做：使用$parsers设置验证键并将用户的输入转换回最新的有效值。

以下指令通过一个数组来执行此操作validators在按顺序运行的指令中指定。如果前面的任何一个验证器失败，那么后面的验证器就不会运行：它假设一次可能发生一个验证错误。

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

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 http://plnkr.co/edit/iUbUCfJYDesX6SNGsAcg?p=preview