需要使用触摸屏从 AngularJS 指令中更新模型

这是我提出的解决方案。请注意，在代码中，我使用"前缀"作为占位符，用于区分逻辑与 AngularJS 的任何前缀。我有几个指令来处理触摸开始和结束：

directives.directive('prefixTouchstart', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.on('touchstart', function (event) {
                scope.$apply(function () {
                    scope.$eval(attrs.prefixTouchstart);
                });
            });
        }
    }
});
directives.directive('prefixTouchend', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.on('touchend', function (event) {
                scope.$apply(function () {
                    scope.$eval(attrs.prefixTouchend);
                });
            });
        }
    }
})

然后，我使用以下指令创建输入字段。请注意，触摸其中一个按钮并按住手指将逐渐增加/减少输入字段。仅当触摸结束事件触发时，模型才会更新。这样做的原因是，在 setInterval 逻辑中更新模型时，AngularJS 不会在 UI 中反映这些更改，我们不能调用$apply，因为我们只会得到"正在进行"错误（$apply在 touchstart/touchend 指令中调用）。

directives.directive('prefixNumericInput', ['$compile', function ($compile) {
    return {
        restrict: 'E',
        templateUrl: 'html-templates/numeric-input.html',
        transclude: true,
        scope: {
            prefixName: '@',
            prefixModel: '=',
            prefixPlaceholder: '@'
        },
        link: function (scope, element, attrs, ctrl, transcludeFn) {
            var intervalId, inputElement = element.find('input');
            var currentValue = scope.prefixModel ? scope.prefixModel : 0;
            inputElement.addClass('form-control');
            // Add our buttons after the input's parent element
            $(element).after($compile('<div class="float-right">' +
                '<button type="button" class="btn btn-primary inc-button" data-prefix-touchstart="incrementStart()" data-prefix-touchend="stop()" data-ng-click="increment()">+</button>' +
                '<button type="button" class="btn btn-primary inc-button" data-prefix-touchstart="decrementStart()" data-prefix-touchend="stop()" data-ng-click="decrement()">-</button>')(scope));
            function decrementCurrentValue() {
                if (currentValue > 0) {
                    --currentValue;
                    return true;
                }
                return false;
            }
            function decrement() {
                if (decrementCurrentValue()) {
                    inputElement[0].value = currentValue;
                }
            }
            scope.increment = function() {
                scope.prefixModel = ++currentValue;
            };
            scope.decrement = function() {
                if (decrementCurrentValue()) {
                    scope.prefixModel = currentValue;
                }
            };
            scope.incrementStart = function () {
                inputElement[0].value = ++currentValue;
                intervalId = setInterval(function() {
                    inputElement[0].value = ++currentValue;
                }, 100);
            }
            scope.stop = function () {
                scope.prefixModel = currentValue;
                clearInterval(intervalId);
            }
            scope.decrementStart = function () {
                decrement();
                intervalId = setInterval(decrement, 100);
            }
        }
    };
}]);

以下是 html 模板：

<div class="input-group column calc-width">
    <span class="input-group-addon">{{prefixName}}</span>
    <input type="number" min="0" id="{{prefixName}}" data-ng-model="prefixModel" placeholder="{{prefixPlaceholder}}" />
</div>

创建字段的代码如下所示：

<div class="col-sm-6 input" data-ng-repeat="value in values">
     <prefix-numeric-input data-prefix-name="{{ value.name }}" data-prefix-model="form.valueArray[value.name]" data-prefix-placeholder="Enter some sort of value here"></prefix-numeric-input>
</div>

我们使用的是 Bootstrap，因此整个逻辑中散落着 css 类。希望这对某人有所帮助。