フォーマッタとパーサーなしで行う必要があることがあれば、より多くの角度で作業することができます。また、ng-modelのディレクティブを必要としないようにすれば、あまりにも多くの混乱。
あなたの問題については、フォーマッタとパーサを必要としない解決策が示されます。フォーマッタとパーサーを使用する必要がある場合は、これを望みますが、基本的には次のソリューション：
のindex.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="[email protected]" 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>
amountInputCurrency.tmpl.html：
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()">
app.js：
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.data = { amount: ''};
});
app.directive('amountInputCurrency', function() {
var isAllowedKey = function (k, v) {
return (
k === 8 || k === 9 || k === 46 ||
(k > 47 && k < 58) ||
(k > 95 && k < 106) ||
(k > 36 && k < 41) ||
(k === 188 && (!v || v.search(/(\.|\,)/)<0)) ||
((k === 190 || k === 110) && (!v || v.search(/(\.|\,)/)<0))
);
};
return {
restrict: 'E',
// require: 'ngModel',
templateUrl: 'amountInputCurrency.tmpl.html',
scope: {
model: '=',
},
link: function (scope, elem, attrs) {
// scope.model2 = ngModelCtrl;
console.log("I am in the directive!");
var myAmountCurrencyType = elem.find('.cb-amount-input-currency');
myAmountCurrencyType.on('keydown', function (e) {
//if (!isAllowedKey(e.which, scope.model)) {
if (!isAllowedKey(e.which, scope.model)) {
e.preventDefault();
}
});
scope.onFocus = function() {
removeThousandSeparator();
};
scope.onBlur = function() {
renderValue();
// ngModelCtrl.$render();
// scope.model = ngModelCtrl.$viewValue;
};
// //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(Number(num).toFixed(decimal), decimal, ',', '.');
// } else {
// return value;
// }
// });
function isNumeric(val) {
return Number(parseFloat(val))==val;
}
function renderValue() {
var value = String(scope.model || '');
var decimal = attrs.cbAmountDecimal || 2;
if (value != undefined && value !="") {
scope.model = formatAmount(value, decimal, ',', '.');
// ngModelCtrl.$render();
}
}
function formatAmount(amount, c, d, t) {
if (amount.indexOf(',') !== -1) {
if (amount.indexOf('.') !== -1) {
amount = amount.replace(/\./g,''); //remove thousand separator
}
amount = amount.replace(/\,/g,'.');
}
c = isNaN(c = Math.abs(c)) ? 2 : c;
d = d === undefined ? "." : d;
t = t === undefined ? "," : t;
var n = amount,
s = n < 0 ? "-" : "",
i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + "",
j = (j = i.length) > 3 ? j % 3 : 0;
return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
}
function removeThousandSeparator() {
if(scope.model != undefined && scope.model !="") {
scope.model = scope.model.replace(/\./g,'');
// ngModelCtrl.$render();
// scope.model = ngModelCtrl.$viewValue;
}
}
function parseValue(viewValue) {
var num = 0;
if(isNumeric(viewValue)) {
num = viewValue;
} else {
num = viewValue ? viewValue.replace(/,/g,'.') : viewValue;
}
return num;
}
}
}
});
これがない場合には、あなたが何をしたいし、私は本当に申し訳ないと、私は私が助けることができるかどうかを確認するために全力を尽くすために私の解決策で問題が何であるかをコメントしてください。
こんにちは、ありがとう...私は、入力フィールド（例：1.000.000,00）でなく、フォーカスを持っているときに千点を取り除いているときに、よくフォーマットされた通貨の値になります。 $ setViewValue（）onBlurイベントでは、スコープ、viewValue、およびmodelValueで値が同じです（viewValueでは書式設定された値が必要ですが、スコープとモデルでは正しくありません）。 – Hazlo8
今分かります。私はそれに応じて私の答えを変更しました –