Angular: allow only numbers

Question

Here is the https://stackoverflow.com/a/3186168/ I want to write something like this script to use the is-number directive in several inputs. Please note that since I have different directives on my tabs, I cannot use the same template that is offered in updating the answer above.

var $scope; var app = angular.module('myapp', []); app.controller('Ctrl', function($scope) { $scope.myNnumber1 = 1; $scope.myNnumber2 = 1; }); app.directive('isNumber', function () { return { require: 'ngModel', link: function (scope, element) { scope.$watch(element.ngModel, function(newValue,oldValue) { newValue = String(newValue); newValue = newValue.replace('۰', '0').replace('۱', '1').replace('۲', '2').replace('۳', '3').replace('۴', '4').replace('۵', '5').replace('۶', '6').replace('۷', '7').replace('۸', '8').replace('۹', '9'); var arr = String(newValue).split(""); if (arr.length === 0) return; if (arr.length === 1 && (arr[0] == '-' || arr[0] === '.' )) return; if (arr.length === 2 && newValue === '-.') return; if (isNaN(newValue)) { element.ngModel = oldValue; } }); } }; 

Update: Please think that I need to do some processes to convert non-English numbers and so on. I created a new fiddle here based on Angular_10 answer. Now everything is fine, except for the cursor position when typing Persian numbers. When I type A Persian Number, it is replaced with an English equivalent number, but the cursor suddenly jumps to the end.

Answer 1

OK! Looking at your demand, I took freedom and wrote a more individual directive.

Here is a fiddle for the same

Problem

The example from which you referenced and the changes made to this directive cause a problem.

• The variable names of the $ scope variable are incorrect in HTML / JS ($ scope.myNnumber1 = 1; $ scope.myNnumber2 = 1; in JS and in HTML it was ng-model = "myNumber1")
• You access element ng-model and try to change it with a directive, which is bad practice, and also the main reason that the directive does not work. Since you do not change the value of ng-model , but, in turn, change the value of the HTML element, angular does not recognize.
• Moreover, using the $watch directive in a directive is not always preferable for performance.

Decision

 app.directive('isNumber', function() { return { require: 'ngModel', restrict: 'A', link: function(scope, element, attr, ctrl) { function inputValue(val) { if (val) { var numeric = val.replace(/[^- 0-9]/g, ''); if (numeric !== val) { ctrl.$setViewValue(numeric ); ctrl.$render(); } return numeric; } return undefined; } ctrl.$parsers.push(inputValue); } }; }); 

When communication with the controller is required from the directive, we can pass the controller as 4 parameters in the link function. From this Ctrl parameter we can change / view objects from the control area.

Using some basic regex expression to find out what the input is, and set it in the object view of the control area object.

 ctrl.$setViewValue(numeric); //to set the value in the respective ngModdel ctrl.$render(); //to display the changed value 

More on $ setViewValue