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

Question

代码：

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

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

Answer 1

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

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

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

NgModelOptions 文档

例子：

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

Answer 2

更新

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

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

下面的旧答案：

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

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

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

更新：

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

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

Answer 3

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

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

Answer 4

工作指令代码（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();
              }
          });
      }
  };
})