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

【问题标题】：How to modify ng-model within Angular $parsers pipeline如何在 Angular $parsers 管道中修改 ng-model
【发布时间】：2015-01-26 15:36:23
【问题描述】：

我在表单中有一个 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 在 total 英寸数上设置最大值，因此不是解决方案我。

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

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

【问题讨论】：

标签： angularjs parsing angularjs-directive angular-ngmodel

【解决方案1】：

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

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

【讨论】：

这很有意义。文档说 “预计 ng-model 指令的用户将实现此方法。” 所以我试图写 ngModelController.$render = function() {...} 但看起来我错了这是必要的。但是，查看您的建议和docs 底部的示例，如果我将您的建议与ngModelController.$render = function() { element.val(ngModelController.$viewValue); } 一起实施，它也可以工作，谢谢！