AngularJS选择多个原因页面跳转

时间:2014-11-07 20:48:22

标签: angularjs

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

2 个答案:

答案 0 :(得分: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

答案 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>