Question

我有一个angularjs应用程序，它根据文本框的输入执行一系列计算。我有它工作得很好，但如果用户选择输入框中的数字并删除它们，基于该数字的结果立即更改为未定义。在这种情况下，angularjs是快速的。从用户体验的角度来看，我希望用户可以自由编辑文本框，只有在模糊该框后才能更新计算文件。

有没有办法在这样的输入字段上发生这种情况：

<input type="text" ng-model="model" custom-magical-directive>

我知道我可以使用隔离范围创建自己的指令，并且只在我准备好时才更新父模型，但我更喜欢保持它干净，因为如果我最终得到这样的东西：

<div custom-isolated-directive ng-model="model">
    <input type="text" ng-model="isolatedModel">
</div>

造型将是一个挑战。

Answer 1

如果您不想要ng-model提供的立即双向绑定，则可以将其保留，并在需要时使用指令更新模型：

<input type="text" update-on-blur="data.name" />

指令：

app.directive('updateOnBlur', function(){
  return {
    restrict: 'A',
    scope: {
      updateOnBlur: '='
    },
    link: function(scope, element, attr) {
      scope.$watch('updateOnBlur', function(newVal, oldVal) {
          element.val(newVal);
      });

      element.on('blur', function() {
        scope.updateOnBlur = element.val();
        scope.$apply();
      });
    }
  }
})

以下是演示：http://plnkr.co/dF9JbfPkgRQxWmGp57ap

$ watch函数将确保输入中可见的程序化更改。然后，事件处理程序在模糊时更新模型。

我可以延迟设置ng-model直到输入模糊？

1 个答案: