如何在 Angular $parsers 管道中修改 ng-model

Question

我在表单中有一个 box.width ng-model 值，打算以英寸为单位存储框的宽度。不过，我希望用户能够看到 "ft" 和 "in" 中的宽度。在大多数情况下，我让它工作。我有 2 个指令将总英寸数格式化为英尺数和剩余英寸数。

示例：http://plnkr.co/edit/Zar1vQ7L2NlxyZeBmY4n?p=preview

问题：

当用户修改表单中的英寸数时触发的解析器只能在一定程度上可靠地工作。如果用户反复单击上勾箭头，英寸字段有时会保持在 11（根据需要作为最大值），但有时会允许输入 12。从控制台日志来看，有时甚至没有触发解析器（可能是由于我在解析器中设置 element.val() 的原因）。这是相关的解析器函数：

function inchesOnlyParser(input) {
   var numFeet = Math.floor(ngModelController.$modelValue / 12);
   var inchesEntered = input;

   if (inchesEntered > 11) {
       var small = numFeet * 12 + 11;
       element.val(11);
       return small;
   }

   return numFeet * 12 + inchesEntered;
}

起初我尝试将 max=11 放在英寸细分的输入字段上，但这导致 angular 将最大值放在总计上英寸数，所以不是我的解决方案。

我已经尝试使用 https://docs.angularjs.org/api/ng/type/ngModel.NgModelController 中提到的各种 ngModelController 方法，但没有找到适合我的解决方案，包括 $rollbackViewValue、$render、$setViewValue 等的组合。我不过，可能只是没有完全正确地理解文档。

正如我所暗示的，我希望的 UI 是用户在英寸输入字段中不能超过 11 英寸；如果不涉及 Angular，它的行为类似于 max=11 设置。

Answer 1

在您的 inchesOnly 指令中，不是使用 element.val(11); 设置输入元素的值，而是设置视图值并再次呈现它。

ngModelController.$setViewValue(11);
ngModelController.$render();

如何在 Angular $parsers 管道中修改 ng-model

How to modify ng-model within Angular $parsers pipeline

parsing

angularjs

angularjs-directive

angular-ngmodel