javascript - AngularJS 我如何观看 $viewValue 而不是 ngModel？

Question

我在输入上使用去抖:

<input type="text"
     ng-model="model.qty"
     ng-model-options="{ debounce : 1000 }"
     min="{{model.min}}" max="{{model.max}}" step="1"
     qty-input validate-model-setting>

我有一个指令来处理禁用此输入的递增按钮和递减按钮:

app.directive('qtyInput', function() {
    return {
        restrict: 'A',
        require: '?ngModel',
        link: function(scope, element, attrs, ngModelCtrl) {
            scope.$watch(attrs.ngModel, function(n, o) {
                var val = parseInt(n);
                if(!isNaN(val)) {
                    if(val + 1 > model.max) {
                        scope.quantityIncDisabled = true;
                    } else {
                        scope.quantityIncDisabled = false;
                    }
                    if(val - 1 < model.min) {
                        scope.quantityDecDisabled = true;
                    } else {
                        scope.quantityDecDisabled = false;
                    }
                }
            });
        }
    }
});

问题是，这个指令上的 watch 正在查看模型。我需要它来查看 $viewValue。这是因为，由于去抖动，在输入输入和使用递增/递减按钮之间存在竞争条件。例如，您可以在输入达到 1(最小值)后反复点击减量按钮恰好 1 秒，只有这样，在去抖动完成后，减量按钮才会被禁用。相反，我希望在输入达到 1 时立即禁用按钮，而不是在等待完整的去抖秒之后。我最好的猜测是，这意味着在 $viewValue 上放置一个 $watch，但我不知道如何在指令中找到它。

供您引用，按钮本身通过更改输入的值然后触发输入来避免竞争条件，这使得去抖动在输入输入和使用按钮时都能流畅地工作。

   link: function(scope, element, attrs) {
        element.bind('click', function() {
            $timeout(function() {
                var input = element.parent().find('input');
                var changingTo = parseInt(input[0].value) + parseInt(scope.inc);
                if(scope.inc < 0 || isNaN(changingTo)) {
                    var min = parseInt(input[0].min);
                    if(isNaN(changingTo)) {
                        changingTo = min;
                    } else if(changingTo < min) {
                        return;
                    }
                } else {
                    var max = parseInt(input[0].max);
                    if(changingTo > max) {
                        return;
                    }
                }
                input[0].value = String(changingTo);
                input.trigger('input');
            });
        });
    }

Answer 1

文档有答案:https://code.angularjs.org/1.2.19/docs/api/ng/type/ngModel.NgModelController

你想像这样使用 $viewChangeListeners 而不是 $watch (你可能需要推送到 $formatters 而不是取决于去抖动的方式作品):

ngModelCtrl.$viewChangeListeners.push(function(){
  var val = parseInt(ngModelCtrl.$viewValue);
  if(!isNaN(val)) {
    ...
  }
});

虽然我还没有玩过 debounce 选项，所以我不知道这是否能解决您的问题，但这就是您查看 viewValue 的方式。