変更イベントの角度$ viewValueがテキストボックスに反映されない

Question

INR（インドルピー）からUSD（米ドル）通貨への変換を実装しようとしています。ビューは常にINRの値を表示する必要があります。しかし、モデルはUSDで値を保持する必要があります。

そのために、入力用のテキストボックスを実装しました。入力は常にINRで与えられます。

そして、私は問題を処理するためにngModelの$ viewValueと$ modelValue属性を使用しています。

私は、あるイベントで通貨がバックグラウンドで計算される状況があります。例えば。通貨がモデルに1ドルとして保存されている場合。アプリケーションのいくつかのイベントで2ドルに変更されます。その場合、私のビューはUSDの値（この例では$ 2）を表示し、テキストボックスに焦点を当てた場合にのみ、値はINR（126 INR）で表示されます。

$ viewValueは変更イベントのテキストボックスに表示されていません。

私を助けてください。

あなたは以下のように scope.$watchを使用してモデル値の変化を監視する必要があり

.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

：

がある場合に使用すると、1つの場所で変更できるようにドルレートのための定数を使用し

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

• 変化する。

• $timeout(function(){},0)の代わりに$evalAsyncを使用してください。

evalAsync vs timeout

デモ

を参照してください、私は意図的にデモの目的のために$timeoutを使用して2秒後にモデル値を変更しました。

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>