Angular directive for multiple elements

Question

I created this number format directive, but if I use it on more than one input, it doesn't work for all of them, but with only one it works. Any ideas?

directive('formatUsNumber', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        priority: 100,
        link: function(scope, element, attrs, ngModel) {

            scope.formatNumber = function() {
                var n = element.val();
                var dest = n;
                if (n.length >= 10) {
                    if (/^[A-Za-z\s]+$/.test(n)) {
                        return;
                    }
                    dest = n.replace(/\D/g, '');
                    if (!isNaN(dest)) {
                        n = dest;
                    }
                    if (n.substr(0, 1) != "1") {
                        n = "1" + n;
                    }
                }
                element.val(n);
                ngModel.$setViewValue(n);
            };
        },
    };
});

The template:

<input type="text" ng-change="formatNumber()" format-us-number ng-model="myModel" />

Fiddle: http://jsfiddle.net/Lvc0u55v/7479/

uamanager · Accepted Answer · 2016-07-26 22:25:02Z

1

I think it's because scope of directive is not isolated. And also I've made few changes, hope it workes the same

directive('formatUsNumber', function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    priority: 100,
            scope: true,
    link: function(scope, element, attrs, ngModel) {

        scope.formatNumber = function() {
            var n = ngModel.$modelValue;
            if (n.length >= 10) {
                if (/^[A-Za-z\s]+$/.test(n)) {
                    return;
                }
                n = n.replace(/\D/g, '');
                if (!isNaN(dest)) {
                    n = dest;
                }
                if (n.substr(0, 1) != "1") {
                    n = "1" + n;
                }

                ngModel.$setViewValue(n, 'change:directive');
            }
        };
    },
  };
});

U can test it here

edited Jul 26, 2016 at 22:25

answered Jul 26, 2016 at 21:51

uamanager

1,3139 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Brayan Over a year ago

Thanks, it actually did work on my fiddle, however on my app I got this error: Error: [$compile:multidir] Multiple directives [formatUsNumber, offClick] asking for new/isolated scope. Ideas?

uamanager Over a year ago

@Brayan both directives needs isolate scope... Can u provide offClick directive body? maybe we can update it and remove usage of isolate scope?

uamanager Over a year ago

@Brayan can u update offClick directive, as I see in their git, they've already fixed this issue

Brayan Over a year ago

Great, will do. Thanks!

clagos · Accepted Answer · 2016-07-26 21:51:32Z

1

Try adding an isolated scope, something like this:

restrict: 'A',
require: 'ngModel',
priority: 100,
scope:{
    ngModel:'='
},...

answered Jul 26, 2016 at 21:51

clagos

563 bronze badges

1 Comment

Brayan Over a year ago

Thanks, it actually did work on my fiddle, however on my app I got this error: Error: [$compile:multidir] Multiple directives [formatUsNumber, offClick] asking for new/isolated scope

pdorgambide · Accepted Answer · 2016-07-27 05:48:47Z

1

For this use case I think that fits better implements a custom filter instead a directive. Building Custom AngularJS Filters Other alternative could be incude a custom parser and/or formatter. AngularJS - Formatters and Parsers

edited Jul 27, 2016 at 5:48

answered Jul 26, 2016 at 22:59

pdorgambide

1,86722 silver badges35 bronze badges

1 Comment

Brayan Over a year ago

Thanks, I'll take a look.

Collectives™ on Stack Overflow

Angular directive for multiple elements

3 Answers 3

4 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related