javascript - AngularJS 无法在文本框中输入

Question

目前我尝试用 AngularJS 实现一个应用程序。一开始我的问题是:我无法在文本框中输入文本。

我有一个 zoomService 可以增加和减少 zoom 属性。用户可以使用 slider 、按钮和文本框进行缩放，但不幸的是，带有文本框的部分不起作用。

这是我的代码:

"use strict";

app.service("zoomService", ["$rootScope", function ($rootScope) {

    var data = {
        zoom: 100,
        upperBound: 200, // TODO: Aus Konfigurationsdatei lesen
        lowerBound: 20 // TODO: Aus Konfigurationsdatei lesen
    };

    return {
        data: data,

        increment: function() {
            if ($rootScope.$root.$$phase != "$apply" && $rootScope.$root.$$phase != "$digest") {
                $rootScope.$apply(function() {
                    if (data.zoom + 1 <= data.upperBound)
                        data.zoom++;
                });
            } else {
                if (data.zoom + 1 <= data.upperBound)
                    data.zoom++;
            }
        },

        decrement: function() {
            if ($rootScope.$root.$$phase != "$apply" && $rootScope.$root.$$phase != "$digest") {
                $rootScope.$apply(function () {
                    if (data.zoom - 1 >= data.lowerBound)
                        data.zoom--;
                });
            } else {
                if (data.zoom - 1 >= lowerBound)
                    data.zoom--;
            }
        },

        reset: function() {
            if ($rootScope.$root.$$phase != "$apply" && $rootScope.$root.$$phase != "$digest") {
                $rootScope.$apply(function () {
                    data.zoom = 100;
                });
            } else {
                data.zoom = 100;
            }
        }
    }
}]);

app.controller("StartController", ["$scope", "zoomService", function($scope, zoomService) {

    $scope.zoom = zoomService;

}]);

<div data-ng-show="project.data.project !== null" class="zoom top-right">
    <div>
        <form name="zoomForm" data-ng-init="setFormScope(this)">
            <img src="/styles/images/16x16/FI_Verkleinern.png" data-ng-click="zoom.decrement()" alt="Zoom -" title="Zoom -" />
            <input class="slider" type="range" min="{{zoom.data.lowerBound}}" max="{{zoom.data.upperBound}}" data-ng-model="zoom.data.zoom" />
            <img src="/styles/images/16x16/FI_Vergroessern.png" data-ng-click="zoom.increment()" alt="Zoom +" title="Zoom +"/>
            <input name="directZoom" type="text" data-ng-minlength="2" data-ng-maxlength="3" data-ng-pattern="/^[0-9]{2,3}$/" data-ng-model="zoom.data.zoom" data-ng-model-options="{updateOn: 'blur'}" data-ng-keyup="cancel($event)" />
        </form>
    </div>
</div>

我很高兴我能解决这个问题的每一个小提示。提前致谢!

Answer 1

可能有一个父元素(在我的例子中是 md-select)正在吞噬您的按键事件。要解决此问题，请尝试将 onkeydown="event.stopPropagation()" 添加到输入标签中。这将阻止事件到达父元素，因此它不能再调用 preventDefault()。

例子:

<input type="text" ng-model="zoom.data.zoom" ... onkeydown="event.stopPropagation()" />

如果这不起作用，请尝试寻找任何其他可能调用 preventDefault() 并吃掉您的 keydown 事件的代码。

也有可能您有一些逻辑，可以在您键入时立即将模型值恢复为其原始值。检查可能执行此操作的任何 ng-change 或 $watch 事件。如果您使用 {updateOn: 'blur'}，这可能不是问题。