Question

我对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>

Answer 1

因此，这不是AngularJS错误，而是“选择元素导致页面加载时自动滚动”错误。

由@tasseKATT评论，这是一个已知的Chrome特定浏览器问题。看起来这个修复程序已经合并到了chrome中，因此很快就会自行修复。

https://code.google.com/p/chromium/issues/detail?id=423256

https://code.google.com/p/chromium/issues/detail?id=430654

Answer 2

一种解决方案是使用$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>

AngularJS选择多个原因页面跳转

2 个答案: