Question

我编写了一个AngularJS指令来验证百分比值，

AngularJS指令

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);
                    }
                }
            );
        }
    };
});

这是我的HTML

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

注意：obj.progress的类型为int，输入类型为数字

问题是当我尝试快速多次更改此输入字段的值时，在另一个值有时变为-1或甚至101之后。虽然我的指令中的条件是newVal < 0 || newVal > 100

需要帮助。

更新1：

仅当用户使用鼠标滚轮更改值时才会发生这种情况。键盘上的箭头键增加或减少时不会发生这种情况。

Answer 1

您可以使用焦点/模糊事件处理它，而不是使用$ watch。

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);
                }
            });
        }
    };
});

希望它有所帮助。

AngularJS指令不是每次都执行

1 个答案: