如何让 ng-model 不立即更新？

Question

代码：

<input type="text" ng-modal="name" />
{{name}}

当我在input 中输入内容时，下面的{{name}} 将立即更改。是否可以配置它只在我输入所有字符并离开输入后更新name？

Answer 1

更新

正如许多人所提到的，Angular 现在使用 ng-model-options 指令内置了对此的支持。查看更多here。

<input type="text" ng-model="name" ng-model-options="{updateOn: 'blur'}" />

下面的旧答案：

ng-model 没有内置选项来更改该行为，但您可以编写自定义指令来执行此操作。 @Gloopy 写了一个类似 for another question 的指令。你可以看看小提琴here。

指令从input 和keydown 事件中注销，这些事件在每次击键后触发更新。

<input type="text" ng-model="name" ng-model-onblur />

更新：

更新小提琴以使用最新的稳定 AngularJS（写作时为 1.2.16），而不是直接引用 github 上的主版本。

还添加了明确的优先级，以便指令在 ng-model 之后运行，以确保正确更改事件侦听器。

Answer 2

这是关于 AngularJS 的最新添加，作为未来的答案。

Angular 较新的版本（现在在 1.3 beta 中），AngularJS 原生支持这个选项，使用 ngModelOptions，就像

ng-model-options="{ updateOn: 'default blur', debounce: { default: 500, blur: 0 } }"

NgModelOptions docs

例子：

<input type="text" name="username"
       ng-model="user.name"
       ng-model-options="{updateOn: 'default blur', debounce: {default: 500, blur: 0} }" />

Answer 3

工作指令代码（ng-1.2RC3）： 采用： ng-model-onblur

.directive('ngModelOnblur', function () {
  return {
      restrict: 'A',
      require: 'ngModel',
      priority: 1,
      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();
              }
          });
      }
  };
})

Answer 4

更好的选择是使用 ng-model-options：

<input type="text" ng-model="name" ng-model-options="{updateOn: 'blur'}" />