Question

我正在尝试实现一英寸到毫米的转换器...我想要的是，如果用户在文本框中输入以英寸为单位的值，则文本框（视图）应显示以英寸为单位的值。模型应保持mm的值。为此我写了一个如下所示的指令。

模型以mm为单位更新，因为我通过调试检查了。但是，当我在文本框外部单击（模糊事件）时，将视图切换到我的Web应用程序中的其他选项卡并返回，模型值将再次填充在文本框中。所以我认为在焦点事件中，我可以将$ modelValue / 25（mm到英寸转换）作为参数传递给$ setViewValue（）函数。但我得到$ modelValue属性为undefined。

.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()一起删除。焦点事件也是不必要的，因为如果你正确使用$ 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中找到整个解决方案。

Answer 2

您正尝试访问输入焦点上的模型值。而是尝试访问keyup上的模型值。并且还使用modelCtrl。$ viewValue而不是modelCtrl。$ modelValue。工作示例如下：

 status         uniqueid                           date
     0      191b117fcf5c      2017-03-01 18:26:28.217000
     1      191b117fcf5c      2017-03-01 19:26:28.192000
     1      191b117fcf5c      2017-04-01 11:16:28.222000

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

2 个答案: