AngularJS 无法在文本框中输入内容

Question

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

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

这是我的代码：

"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'}。