AngularJS 仅在模糊时更新模型答案

【问题标题】：AngularJS update model only on blurAngularJS 仅在模糊时更新模型
【发布时间】：2013-10-29 14:41:56
【问题描述】：

我有一个要求，只有在输入模糊或按下输入时才应该更新模型，并且错误/成功消息只会在输入之后而不是在输入期间显示。以前我使用的是 AngularJS 1.2 rc2 并有以下代码：

Javascript：

angular.module('app', []).directive('ngModelOnblur', function () {
  return {
      restrict: 'A',
      require: 'ngModel',
      link: function (scope, element, attrs, ngModelCtrl) {
          if (attrs.type === 'radio' || attrs.type === 'checkbox') { return; }
          var update = function () {
              scope.$apply(function () {
                  ngModelCtrl.$setViewValue(element.val().trim());
                  ngModelCtrl.$render();
              });
          };
          element.off('input').off('keydown').off('change').on('focus', function () {
              scope.$apply(function () {
                  ngModelCtrl.$setPristine();
              });
          }).on('blur', update).on('keydown', function (e) {
              if (e.keyCode === 13) {
                  update();
              }
          });
      }
  };
})
.controller('Ctrl', ['$scope', function ($scope) {
  $scope.getClass = function (input) {
    if (input.$pristine) { return ''; }
    return input.$invalid ? 'has-error' : 'has-success';
  };
}]);

HTML：

<div ng-controller="Ctrl">
  <form name="form" novalidate>
    <div ng-class="getClass(form.firstname)">
      <input type="text" name="firstname" ng-model="firstname" ng-model-onblur ng-pattern="/^\d{4}$/" />
      <div class="error">error</div>
      <div class="success">success</div>
      $pristine: {{form.firstname.$pristine}}
    </div>
  </form>
</div>

CSS：

  .error, .success {
    display: none; 
  }
  .has-error .error, .has-success .success {
    display: block; 
  }

但自从我升级到 RC3 后，事情开始出现问题。尽管我删除了输入、更改和 keydown 的事件处理程序，但 $pristine 在输入期间仍设置为 false，因此将显示消息。

我尝试为指令设置terminal: true、priority: -1，但它仍然不起作用。我做错了什么？

这里是 plunker：http://plnkr.co/edit/8FliNc?p=preview

提前致谢

【问题讨论】：

标签： angularjs

【解决方案1】：

如果你给你的指令优先级它对我有用：1.设置终端=真意味着永远不会调用ng-model，我认为不支持优先级-1。

http://plnkr.co/edit/mZyWw8?p=preview

我在指令中发现了一些小问题：当您重新聚焦输入时，模型被重置（表单设置为原始），即使模型有效。如果清空输入，则模型设置完成后，模型不会设置为 undefined。

【讨论】：

【解决方案2】：

我认为现在 Angular JS 原生支持这一点。

见：https://docs.angularjs.org/api/ng/directive/ngModelOptions

我使用的是 angular 1.6，“updateOn: 'blur'”似乎对我有用。

【讨论】：