AngularJS指令不是每次都执行

AngularJS directive not executing everytime

本文关键字：执行 指令 AngularJS      更新时间：2023-09-29

我编写了一个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:

只有当用户使用鼠标滚轮更改值时才会发生这种情况。当通过键盘上的箭头键递增或递减时，不会发生这种情况。

您可以使用焦点/模糊事件来处理它，而不是使用$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);
                }
            });
        }
    };
});

希望能有所帮助。

相关文章：