javascript - 尝试在指令中访问 $modelValue 时未定义

Question

我正在尝试实现英寸到毫米的转换器...我想要的是，如果用户在文本框中输入以英寸为单位的值，则文本框( View )应以英寸为单位显示值。模型应该以毫米为单位保存值。为此，我编写了如下所示的指令。

正如我通过调试检查的那样，模型以毫米为单位更新。但是，当我在文本框外单击(模糊事件)，将 View 切换到我的网络应用程序中的其他选项卡并返回时，模型值再次填充到文本框中。所以我认为在焦点事件上，我可以将 $modelValue/25 (毫米到英寸的转换)作为参数传递给 $setViewValue() 函数。但是我得到 $modelValue 属性未定义。

.directive('metricImperialInput', function($timeout){
              return{
                  require: 'ngModel',
                  link: function(scope, element, attrs, modelCtrl){
                      element.bind("focus", function(e) {
                      $timeout(function() {
                          modelCtrl.$setViewValue(modelCtrl.$modelValue/25);
                          modelCtrl.$render();
                     }, 0);
                   });
                      modelCtrl.$parsers.push(function(inputValue){
                          var changedOutput = parseInt(inputValue) * 25;
                          modelCtrl.$setViewValue(parseInt(inputValue));
                          modelCtrl.$render();
                          return parseInt(changedOutput);
                      });
                  }
              };
          });

Answer 1

您正确地使用了 ngModelController.$parsers，但在解析器内部您还使用了 $setViewValue()，这是完全不需要的，因为 inputValue解析器函数接收到的已经是 $viewValue!这样就可以将其与 $render() 一起删除。 focus 事件也不是必需的，因为如果您正确使用 $parsers，它不会做任何有用的事情。

所以现在你只剩下这个了:

.directive('metricImperialInput', function($timeout){
          return{
              require: 'ngModel',
              link: function(scope, element, attrs, modelCtrl){
                modelCtrl.$parsers.push(function(inputValue){
                  var changedOutput = parseInt(inputValue) * 25;
                  return parseInt(changedOutput) || 0;
                });
              }
          };
      });

但这有一个问题，在您开始使用输入之前，初始的 $modelValue 不会被转换。为此，我添加了以下几行以确保当指令加载时它会正确设置初始值，然后解析器会处理所有内容。

var initVal = $parse(attrs.ngModel)(scope);
modelCtrl.$viewValue = initVal / 25;
modelCtrl.$modelValue = initVal;
modelCtrl.$render();

您可以在此 JSFiddle 中找到完整的解决方案.