I am currently working on developing an AngularJS app. I have encountered a problem where I am unable to input text into a textbox.
The issue lies with my zoomService which handles zoom increments and decrements. While the user can zoom using a slider and buttons, the functionality seems to be broken for the textbox input.
Below is the code snippet:
"use strict";
app.service("zoomService", ["$rootScope", function ($rootScope) {
// Service implementation goes here
}]);
app.controller("StartController", ["$scope", "zoomService", function($scope, zoomService) {
// Controller implementation goes here
}]);
<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>
If anyone has any insights or suggestions on how to resolve this issue with the textbox input, it would be greatly appreciated. Thank you!