Question

我之前写过这个[问题] [1]，Inow我遇到的问题是模型。$ viewValue它与我在输入框中看到的值不一样。

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

这是我的指令（isNumeric和类似的并不重要，因为它起作用）：

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>

Answer 1

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

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

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实现它。

Answer 2

Checkout Formatters和Parser，它是如何做你想要的，但你必须要求ngModel挂钩附加格式化程序或解析器。

关于他们的好文章：https://alexperry.io/angularjs/2014/12/10/parsers-and-formatters-angular.html

问候。

Answer 3

如果你没有格式化程序和解析器就可以做你需要做的事情，那就更好了，因为你以更有棱角的方式工作更多，如果你可以避免在没有它的情况下管理指令中的ng-model，这也会导致很多混乱。

至于你的问题，我将展示一个不需要格式化程序和解析器的解决方案，我希望这是你想要的，如果你必须使用格式化程序和解析器，但它基本上会像以下一样溶液：

的index.html：

find-renames

amountInputCurrency.tmpl.html：

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.15/angular.js" data-semver="1.2.15"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <!--<div amount-input-currency="" ng-model="data.amount" ></div>-->
    <amount-input-currency model="data.amount"></amount-input-currency>
  </body>

</html>

app.js：

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

如果这不是你想要的，那么我真的很抱歉，请评论我的解决方案中的问题是什么，我会尽力看看能否提供帮助。

角度模型。$ viewValue未在输入字段中显示

3 个答案:

角度模型。$ ​​viewValue未在输入字段中显示

3 个答案:

角度模型。$ viewValue未在输入字段中显示