角度模型$ viewValue在输入字段中不显示 [英] Angular model.$viewValue not showing in input field

问题描述

我以前写这个[question] [1]，Inow我有这个问题，那个模型$ viewValue和我在输入框里看到的值不一样。

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

这是我的指令（isNumeric和类似的并不重要）。 b
$ b

  var app = angular.module（'plunker'，[]）; 
 $ b app.controller（'MainCtrl'，function（$ scope）{
 $ scope.data = {amount：''}; 
}）; 
 app.directive（'amountInputCurrency'，function（）{
 return {
 restrict：'EA'，
 require：'ngModel'，
 templateUrl：'inputCurrency .tmpl.html'，
作用域：{
模型：'= ngModel'，
}，
链接：函数（范围，元素，attrs，ngModelCtrl）{
 scope.model2 = ngModelCtrl; 
 console.log（我在指令中！）; 
 var myAmountCurrencyType = elem.find（'.cb-amount-input-currency'）; 
 
 scope.onFocus = function（）{
 removeThousandSeparator（）; 
}; 
 
 scope.onBlur = function（）{
 renderValue ）; 
 ngModelCtrl。$ render（）; 
}; 
 
 
 //格式化文本到用户（模型查看）
 ngModelCtrl。$ formatters.push（函数（值）{
返回parseValue（值）; 
}）; 
 
 //从用户格式文本（视图到模型）
 ngModelCtrl。$ parsers.p ush（function（value）{
 var num = Number（value）; 
 if（isNumeric（num））{
 var decimal = 2; 
 return formatAmount（）; 
} else {
返回值; 
} 
}）; 
 
函数isNumeric（val）{
返回Number（parseFloat（val））== val; 
} 
 
} 
} 
}）; 
  

这是我的模板：

  scope.model：{{model}}< br> 
 viewValue：{{model2。$ viewValue}}< br> 
 modelValue：{{model2。$ modelValue}}< br> 
< input type =textclass =amount-input-currency form-controlx-ng-model =modelng-focus =onFocus（）ng-blur =onBlur >< /输入> 
  

解决方案使用 ngModelCtrl设置viewValue 。$ setViewValue（）为了更新模型，而不是直接设置$ viewValue字段。但我不确定在这种情况下使用NgModelController的意义。

如果唯一的目的是格式化文本框的值，那么操纵输入元素值而不是NgModelController字段。

 函数renderValue（）{
 var myAmountCurrencyType = elem.find（'input'）; 
 var value = myAmountCurrencyType.val（）; 
 
 var decimal = 2; 
 if（value！= undefined&& value！=）{
 myAmountCurrencyType.val（formatAmount（））; 
 
 
 
 
 $ b $ p $这样它就不会更新模型。如果要完全控制数据绑定，可以考虑从输入元素 x-ng-model =model中删除​​绑定，并在您的应用程序中使用NgModelController实现它指示。  
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>
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;
      }

    }
  }
});
And this is my template:
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>

解决方案
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.

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());
    }
  }
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. 

                        
这篇关于角度模型$ viewValue在输入字段中不显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！