演示

Question

我正在尝试将INR（印度卢比）兑换成美元（美元）货币转换器。视图应始终显示INR中的值。但该模型应该保持美元的价值。

为此，我实现了一个输入文本框。输入将始终以INR给出。

我正在使用ngModel的$ viewValue和$ modelValue属性来处理我的问题。

我的情况是货币在某些事件的后台计算。例如。如果货币在模型中存储为1美元。它在应用程序中的某些事件上变为2美元。在这种情况下，我的视图显示USD的值（在此示例中为$ 2），并且只有当我专注于我的文本框时，该值才会显示在INR中（为126 INR）。

$ viewValue未显示在更改事件的文本框中。

请帮帮我。

.directive('usdInrInput', function($filter, $timeout) {
    return {
        require: 'ngModel',
        link: function(scope, element, attrs, modelCtrl) {

            function conversionFunction() {
                modelCtrl.$viewValue = modelCtrl.$modelValue * 63;
                modelCtrl.$render();
            }
            element.bind("focus", function(e) {
                $timeout(function() {
                    conversionFunction();
                }, 0);
            });
            element.bind("change", function(e) {
                $timeout(function() {
                    conversionFunction();
                }, 0);
            });
            modelCtrl.$parsers.push(function(inputValue) {
                var changedOutput = parseInt(inputValue) / 63;
                modelCtrl.$setViewValue(parseInt(inputValue));
                modelCtrl.$render();
                return parseInt(changedOutput);
            });
        }
    };
})

Answer 1

您应该使用scope.$watch来监视模型值的变化，如下所示：

scope.$watch(function() {
    return modelCtrl.$modelValue;
}, function(val) {
    conversionFunction();
});

使用常数作为美元汇率，以便您可以在一个地方修改，如果有变化。
使用$evalAsync代替$timeout(function(){},0)。

参考evalAsync vs timeout

演示

我故意在2秒后使用$timeout更改模型值以进行演示。

angular
  .module('myApp', []);
angular
  .module('myApp')
  .controller('MyController', MyController)
  .directive('usdInrInput', usdInrInput);
MyController.$inject = ['$scope', '$timeout'];

function MyController($scope, $timeout) {
  $scope.inr = 630;
  $timeout(function() {
    $scope.inr = 10;
  }, 2000);
}

usdInrInput.$inject = ['$filter', '$timeout'];

function usdInrInput($filter, $timeout) {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, modelCtrl) {
      var cRate = 63;
      scope.$watch(function() {
        return modelCtrl.$modelValue;
      }, function(val) {
        conversionFunction();
      });

      function conversionFunction() {
        modelCtrl.$viewValue = modelCtrl.$modelValue * cRate;
        modelCtrl.$render();
      }
      element.bind("focus", function(e) {
        scope.$evalAsync(function() {
          conversionFunction();
        });
      });
      element.bind("change", function(e) {
        scope.$evalAsync(function() {
          conversionFunction();
        });
      });
      modelCtrl.$parsers.push(function(inputValue) {
        var changedOutput = parseInt(inputValue) / cRate;
        modelCtrl.$setViewValue(changedOutput);
        modelCtrl.$render();
        return changedOutput;
      });
    }
  };
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>

<div ng-app="myApp" ng-controller="MyController as MC">

  <input type="text" ng-model="inr" usd-inr-input> {{inr}}
</div>

Angular $ viewValue不会在更改事件的文本框中反映出来

1 个答案:

演示