Angular: Empty Fiddle
http://angularjs.org/
HTML
<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/accounting.js/0.4.1/accounting.js"></script>
<div ng-controller="MyCtrl">
<input ng-model="var.value" class="integers" update-func="update(var, number)" symbol="°" />
<br />
<p>Try to enter a number less than a thousand.</p>
<p>(I call the <b>format function onBlur</b> and call <b>unformat function onFocus</b> so the error occurs everytime <b>onBlur</b> is called)</p>
<br /><br /><br />
Result:
<br />
{{var.numbericVal * 2}}
</div>
JavaScript
var myApp = angular.module('myApp',['ui.numeric']);
angular.module('ui.numeric', []).directive('integers', function($parse) {
return {
require: 'ngModel',
restrict: 'EACM',
link: function(scope, element, attrs, modelCtrl) {
scope.$watch(element, function() {
var formatted_number = accounting.formatMoney(element.val(),"", 2,",",".","%s%v");
modelCtrl.$setViewValue(formatted_number);
modelCtrl.$render();
});
element.bind('blur', function() {
var invoker = $parse(attrs.updateFunc);
invoker(scope, {number: element.val() * 1});
var formatted_number = accounting.formatMoney(element.val(),"", 2,",",".","%s%v");
modelCtrl.$setViewValue(formatted_number);
modelCtrl.$render();
scope.$apply();
});
element.bind('focus', function() {
var plainNumber = accounting.unformat(element.val())
if(plainNumber == "0") plainNumber = "";
modelCtrl.$setViewValue(plainNumber);
modelCtrl.$render();
scope.$apply();
console.log("I am focused!");
var invoker = $parse(attrs.updateFunc);
invoker(scope, {number: plainNumber});
});
}
};
});
function MyCtrl($scope) {
$scope.var = {"value":1000.36};
$scope.update = function(obj, number) {
obj.numbericVal = accounting.unformat(obj.value);
console.log(obj,number);
};
}