我对AngularJS有一个非常令人沮丧的问题,如果模型在其他地方更新,页面会跳转到select元素。看看这个plunker,我通过一个复选框更新模型,然后页面跳转到select multiple元素。未指定multiple时不会发生(在我的实际工作示例中,我需要多个set)。
任何人都有这个或一些输入的修复?感谢。
http://plnkr.co/edit/EByAPb?p=preview
Check me to select: <input type="checkbox" ng-model="selected"><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<select multiple>
<option>Hello!</option>
<option id="greet" ng-selected="selected">Greetings!</option>
</select>
答案 0 :(得分:1)
因此,这不是AngularJS错误,而是“选择元素导致页面加载时自动滚动”错误。
由@tasseKATT评论,这是一个已知的Chrome特定浏览器问题。看起来这个修复程序已经合并到了chrome中,因此很快就会自行修复。
答案 1 :(得分:0)
一种解决方案是使用$anchorScroll
将浏览器推回到顶部:
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope,$anchorScroll) {
$scope.refocus = function() {
$anchorScroll();
}
});
<html ng-app="app">
<script src="https://code.angularjs.org/1.3.1/angular.js"></script>
<body ng-controller="MainCtrl">
Check me to select: <input id="scrollHere" type="checkbox" ng-model="selected" ng-click="refocus()"><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<select multiple>
<option>Hello!</option>
<option id="greet" ng-selected="selected">Greetings!</option>
</select>
</body>
</html>
或者,在调用id
之前,通过为其分配$location.hash
并设置$anchorScroll()
来专门滚动到相关元素:
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope,$location,$anchorScroll) {
$scope.refocus = function() {
$location.hash('scrollToHere');
$anchorScroll();
}
});
<html ng-app="app">
<script src="https://code.angularjs.org/1.3.1/angular.js"></script>
<body ng-controller="MainCtrl">
Check me to select: <input id="scrollToHere" type="checkbox" ng-model="selected" ng-click="refocus()"><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<select multiple>
<option>Hello!</option>
<option id="greet" ng-selected="selected">Greetings!</option>
</select>
</body>
</html>