Ich baue eine App in AngularJS und habe Probleme mit Dropdown-Menüs bei der Verwendung von Firefox.Firefox wählen Dropdown-Menü wird aktualisiert/auf Standard-Option aufgrund der Ausführung von Javascript zurückgesetzt - AngularJS
Wenn ich auf ein Auswahlmenü klicke und die Maus über die Optionen bewege, wird die ausgewählte Option, von der, über die sich der Cursor bewegt, auf die Standardoption/first zurückgesetzt. Wenn die Anzahl der Optionen groß ist, wird es sehr schwierig, die richtige Option auszuwählen.
Die App benötigt JavaScript, um den Bildschirm jede Sekunde zu aktualisieren, und dies scheint die Ursache zu sein.
Allerdings scheint dieses Problem mit Chrome oder Safari nicht zu haben.
Gibt es eine Möglichkeit, dies für Firefox zu lösen?
index.html
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<script data-require="[email protected]" data-semver="1.0.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body ng-controller="ctrl">
<div ng-init="updatetimer()">
<div>seconds: {{counter}}</div>
<select ng-model="something" ng-options="n.name for n in namelist">
<option value="">select person</option>
</select>
</div>
</body>
</html>
script.js
var app = angular.module('myapp', []);
var ctrl = ['$scope', '$timeout', function($scope, $timeout) {
$scope.counter=0;
$scope.namelist = [
{name: "Name1"}, {name: "Name2"}, {name: "Name3"}, {name: "Name4"}, {name: "Name5"},
{name: "Name6"}, {name: "Name7"}, {name: "Name8"}, {name: "Name9"}, {name: "Name10"},
{name: "Name11"}, {name: "Name12"}, {name: "Name13"}, {name: "Name14"},
{name: "Name15"}, {name: "Name16"}, {name: "Name17"}, {name: "Name18"},
{name: "Name19"}, {name: "Name20"}, {name: "Name21"}, {name: "Name22"},
{name: "Name23"}, {name: "Name24"}, {name: "Name25"}, {name: "Name26"},
{name: "Name27"}, {name: "Name28"}, {name: "Name29"}, {name: "Name30"}
];
$scope.updatetimer = function() {
var updater = function() {
$scope.counter++;
$timeout(updater, 1000);
}
updater();
};
}];
Timer wird die $ Digest-Schleife jede Sekunde auslösen und jedes Mal eine erneute Auswertung der ng-options-Ausdrücke bewirken. Ich glaube nicht, dass Sie etwas dagegen tun können, abgesehen von der Erstellung Ihrer eigenen Direktive, die jQuery verwendet, um beim ersten Lauf das nicht gebundene Drop-down zu erzeugen und die nachfolgenden $ Digest-Schleifen zu ignorieren. – Stewie
@Stewie, was löst die $ Digest Loops aus? Der $ scope in dieser Funktion? Wenn ja, setzen Sie die Timer-Funktion in eine Direktive und lassen Sie sie auf altmodische Weise aktualisieren - angle.element (element) .html (counter) ... – rGil
Dem stimme ich zu, das klingt nach einer besseren Idee. In diesem Fall müsste das OP auch den dritten Parameter (invokeApply) in der $ timeout-Funktion auf false setzen. – Stewie