Angular model.$viewValue 未显示在输入字段中

问题描述

我以前写过这个[问题][1]，现在我遇到的问题是model.$viewValue 与我在输入框中看到的值不同.

I previously write this [question][1], Inow I have the problem that the model.$viewValue it's not the same of the value the i see in the input box.

<div amount-input-currency="" ng-model="data.amount" ></div>

这是我的指令(isNumeric 和类似的并不重要，是否有效):

This is my directive (isNumeric and similar is not important that works weel):

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.data = { amount: ''};
});
app.directive('amountInputCurrency', function () {
  return {
    restrict: 'EA',
    require: 'ngModel',
    templateUrl: 'inputCurrency.tmpl.html',
    scope: {
      model: '=ngModel',
    },
    link: function (scope, elem, attrs, ngModelCtrl) {
      scope.model2 = ngModelCtrl;
      console.log("I am in the directive!");
      var myAmountCurrencyType = elem.find('.cb-amount-input-currency');

      scope.onFocus = function() {
          removeThousandSeparator();
      };

      scope.onBlur = function() {
          renderValue();
          ngModelCtrl.$render();
      };


      //format text going to user (model to view)
      ngModelCtrl.$formatters.push(function(value) {
        return parseValue(value);
      });

      //format text from the user (view to model)
      ngModelCtrl.$parsers.push(function(value) {
        var num = Number(value);
        if(isNumeric(num)) {
            var decimal = 2;
            return formatAmount();
        } else {
            return value;
        }
      });

      function isNumeric(val) {
        return Number(parseFloat(val))==val;
      }

    }
  }
});

这是我的模板:

scope.model: {{model}}<br>
viewValue: {{model2.$viewValue}}<br>
modelValue: {{model2.$modelValue}}<br>
<input type="text" class="amount-input-currency form-control" x-ng-model="model" ng-focus="onFocus()" ng-blur="onBlur()"></input>

推荐答案

使用 ngModelCtrl.$setViewValue() 设置 viewValue 以更新模型而不是直接设置 $viewValue 字段.但我完全不确定在这种情况下使用 NgModelController 有什么意义.

Set the viewValue using ngModelCtrl.$setViewValue() in order to update the model instead of setting $viewValue field directly. But I am not sure what is the point of using NgModelController in this case at all.

如果唯一的目的是格式化文本框的值，则操作输入元素值而不是 NgModelController 字段.

If the only purpose is to format the value of the textbox, manipulate the input element value instead of NgModelController fields.

function renderValue() {
    var myAmountCurrencyType = elem.find('input');
    var value = myAmountCurrencyType.val();

    var decimal = 2;
    if (value != undefined && value !="") {
      myAmountCurrencyType.val(formatAmount());
    }
  }

这种方式不会更新模型.如果您想完全控制数据绑定，您可以考虑从输入元素 x-ng-model="model" 中删除绑定，并在指令中使用 NgModelController 实现它.

This way it does not update the model. If you want to have full control over the data binding you can consider removing the binding from the input element x-ng-model="model" and implementing it using NgModelController in your directive.

这篇关于Angular model.$viewValue 未显示在输入字段中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！