Question

我正在为数字步进器制作一个角度指令。这是指令：

.directive('rnStepper', function() {
    return {
        restrict: 'AE',
        require: 'ngModel',
        scope: {
            min: '=',
            max: '='
        },
        template: '<div class="spinner-buttons input-group-btn"><button ng-click="decrement();" class="btn spinner-down" type="button">- </button></div>' +
        '<input type="text" style="text-align: center;" maxlength="3" class="spinner-input form-control ng-pristine ng-untouched ng-valid ng-valid-maxlength"/>' +
        '<div class="spinner-buttons input-group-btn"><button ng-click="increment();" class="btn spinner-down" type="button">+</button></div>',
        link: function(scope, iElement, iAttrs, ngModelController) {

            ngModelController.$render = function() {
                iElement.find('input').val(ngModelController.$viewValue);
                // update the validation status
                checkValidity();
            };

            // when model change, cast to integer
            ngModelController.$formatters.push(function(value) {
                return parseInt(value, 10);
            });

            // when view change, cast to integer
            ngModelController.$parsers.push(function(value) {
                return parseInt(value, 10);
            });

            function checkValidity() {
                // check if min/max defined to check validity
                var valid = !(scope.isOverMin(true) || scope.isOverMax(true));
                // set our model validity
                // the outOfBounds is an arbitrary key for the error.
                // will be used to generate the CSS class names for the errors
                ngModelController.$setValidity('outOfBounds', valid);
            }

            function updateModel(offset) {
                // update the model, call $parsers pipeline...
                ngModelController.$setViewValue(ngModelController.$viewValue + offset);
                // update the local view
                ngModelController.$render();
            }

            scope.isOverMin = function(strict) {
                var offset = strict?0:1;
                return (angular.isDefined(scope.min) && (ngModelController.$viewValue - offset) < parseInt(scope.min, 10));
            };
            scope.isOverMax = function(strict) {
                var offset = strict?0:1;
                return (angular.isDefined(scope.max) && (ngModelController.$viewValue + offset) > parseInt(scope.max, 10));
            };


            // update the value when user clicks the buttons
            scope.increment = function() {
                updateModel(+1);
            };
            scope.decrement = function() {
                updateModel(-1);
            };

            // check validity on start, in case we're directly out of bounds
            checkValidity();

            // watch out min/max and recheck validity when they change
            scope.$watch('min+max', function() {
                checkValidity();
            });
        }
    };
});

'+'和' - '似乎工作正常。但是，无论何时修改输入文本框中的值，模型似乎都不会更新。修改输入文本框中的值后，无论何时尝试增加和减少，它都无法按预期工作。

以下是 codepen 。

UPD ：

根据@Michael的回答，我在指令输入文本框中使用了ngModel。

'<input ng-model="ngModel" type="text" style="text-align: center;"  class="spinner-input form-control"/>' +

模型已更新，但未触发ng-change。

然而，在点击+或' - '时，每当我编辑输入文本框时都会触发ng-change !!

这是我更新的 codepen

Answer 1

文本输入字段没有绑定，因此如果直接输入数字，则不会识别出角度。您需要添加更改侦听器或仅使用ng-model指令。

Angular JS-Spinner（数字步进器）UI小部件指令

1 个答案: