javascript - AngularJS 指令并非每次都执行

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 类型，输入类型也是 number

问题是，当我尝试多次快速更改此输入字段的值时，有时另一个值会变为 -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);
                }
            });
        }
    };
});

希望有帮助。