AngularJS directive not executing everytime

Question

I have written an AngularJS directive to validate percent value,

AngularJS Directive

app.directive('validatePercent', function () {
    return {
        restrict: 'A',
        link: function ($scope, elem, attr) {
            $scope.$watch(function () { return elem.val(); },
                function (newVal, oldVal) {
                    console.log("old : ", oldVal);
                    console.log("new : ", newVal);
                    if (newVal < 0 || newVal > 100)
                    {
                        elem.val(oldVal);
                    }
                }
            );
        }
    };
});

Here's my HTML

<input validate-percent ng-model="obj.progress" type="number" class="form-control" />

Note : obj.progress is of type int, also input type is number

The issue is when I try to change value of this input field multiple times quickly one after the another value goes to -1 or even 101 sometimes. Although condition in my directive is newVal < 0 || newVal > 100

Need help.

UPDATE 1:

This happens only when user changes values using mouse wheel. It doesn't happens while increment or decrements by arrow keys on keyboard.

Why not use <input type="number" ng-model="obj.progress" min="0" max="100"> — yeouuu
– yeouuu, Commented Mar 30, 2016 at 13:00
because min and max are not recognized by all browsers. I guess Firefox is one of them. — Yogesh
– Yogesh, Commented Mar 30, 2016 at 13:07
Min-max is working for me in the latest Firefox. But anyway you don't need a watcher for this. You can do it with validators: stackoverflow.com/questions/12581439/… — yeouuu
– yeouuu, Commented Mar 30, 2016 at 13:13
another reason for not using min max is, if a user enters something like -236 then it accepts that value, even if min is set to 0 — Yogesh
– Yogesh, Commented Mar 30, 2016 at 13:25
No your form will be invalid. You should look into angular form validation. This answer is not the correct way to handle this. — yeouuu
– yeouuu, Commented Mar 30, 2016 at 13:36

Thomas Bormans · Accepted Answer · 2016-03-30 13:48:05Z

2

Instead of using $watch, you can handle it using focus/blur events.

app.directive('validatePercent', function () {
    return {
        restrict: 'A',
        link: function ($scope, elem, attr) {
            var oldVal = elem.val();
            elem.bind('focus', function(e) {
                oldVal = elem.val();
            });
            elem.bind('blur', function(e) {
                if ( elem.val()< 0 || elem.val() > 100)
                {
                    elem.val(oldVal);
                }
            });
        }
    };
});

Hope it helps.

edited Mar 30, 2016 at 13:48

Thomas Bormans

5,4127 gold badges37 silver badges51 bronze badges

answered Mar 30, 2016 at 13:10

Subash Selvaraj

3,3871 gold badge16 silver badges17 bronze badges

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

2 Comments

Yogesh Over a year ago

Nice solution. This also solved my other problem, maintaining old value. ;). Thanks.

Subash Selvaraj Over a year ago

@Yogesh, Glad it helped. Accept my answer please.

Collectives™ on Stack Overflow

AngularJS directive not executing everytime

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related