At the moment I try to implement an app with AngularJS. At first my problem: I am not able to type text into a textbox.

I have a zoomService which increments and decrements the zoom property. The user is able to zoom with a slider, buttons and a textbox but unfortunatelly the part with the textbox doesn't work.

Here is my code:

"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>

I am happy about every small hint which I could solve this problem. Thanks in advance!

At the moment I try to implement an app with AngularJS. At first my problem: I am not able to type text into a textbox.

I have a zoomService which increments and decrements the zoom property. The user is able to zoom with a slider, buttons and a textbox but unfortunatelly the part with the textbox doesn't work.

Here is my code:

"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>

I am happy about every small hint which I could solve this problem. Thanks in advance!

• javascript
• html
• css
• angularjs
• textbox

• 2 can you prepare jsfiddle for this? – Ankita Commented Jun 15, 2015 at 9:29
• 1 you have a error - used lowerBound in decrement instead data.lowerBound and also seems like in your case better factory instead service – Grundy Commented Jun 15, 2015 at 9:36
• plnkr.co/edit/nkBH5Q0c31UIwNGJivPA?p=preview Now I have created a plunkr and there it works but on my system it doesn't. I am really confused! My hole app is much bigger then this snippet maybe there are some other side effects? How could I detect such ugly side effects? – Patrick Vogt Commented Jun 15, 2015 at 9:52

2 Answers 2

There could be a parent element (md-select in my case) that is eating your key down events. To fix this, try adding onkeydown="event.stopPropagation()" to the input tag. This will prevent the event from reaching the parent element, so it can't call preventDefault() anymore.

Example:

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

If that doesn't work, try looking for any other code that might be calling preventDefault() and eating your keydown events.

It's also possible that you have some logic that is reverting the model value back to its original value as soon as you type. Check for any ng-change or $watch events that might be doing this. Although this is probably not the issue if you use {updateOn: 'blur'}.

When you have

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

set, the value will be updated only after user leaver the input field. If you remove this code, the update is instantaneous. Here's the reproduced example http://jsbin./nogegutize/edit?html,js,output