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

当你有

ng-model-options={updateOn: 'blur'}

已设置，只有在用户离开输入字段后才会更新该值。如果删除此代码，更新是即时的。这是复制的示例 http://jsbin.com/nogegutize/edit?html,js,output

Answer 2

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

示例：

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

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

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

这可能不是问题

AngularJS 无法在文本框中输入

AngularJS not able to type in textbox

html

javascript

css

textbox

angularjs