在角度js更新模型時保留滾動位置

Question

我有一個團隊列表，並且用戶可以將一個團隊添加到團隊列表。我遇到的問題是，當我添加一個項目到列表中時，角度重新呈現列表，滾動位置重置爲頂部。

這是模板

<div ng-controller="scores"> 
    <ul> 
    <li ng-repeat="team in teams"> 
     {{team.name}}: 
     <button ng-click="decr(team)">-</button> 
     {{team.score}} 
     <button ng-click="incr(team)">+</button> 
    </li> 
    </ul> 
    <a href="#" ng-click="add()">(+)Add Team</a> 
    </div> 

這裏是控制器代碼

function scores($scope){ 
    $scope.teams = [ 
    {name:'red', score:100}, 
    {name:'blue', score:100}, 
    {name:'green', score:100} 
    ]; 

    $scope.decr= function(team){team.score-=1;}; 
    $scope.incr= function(team){team.score+=1;}; 
    $scope.add= function(){$scope.teams.push({name:"...", score:100});};  

} 

你可以看到在這裏工作的例子。 http://jsbin.com/asedib/5

Answer 1

問題是，您有href="#"，每次單擊鏈接時都會將錨點/滾動位置重置爲頁面頂部。

我看到兩個簡單的解決方案：

最簡單的是錨變爲按鈕。這仍然清楚地表明，這是一個可點擊的元素，但沒有錨元素：

<button ng-click="add()">(+) Add Team</button> 

如果你喜歡的主播風格的外觀，你可以刪除href="#"，但隨後更新您的CSS樣式非錨鏈接到看看就像一個鏈接。事情是這樣的：

<a ng-click="add()" class="clickable">(+) Add Team</a> 

而CSS：

a, a.clickable { 
    color: blue; 
    text-decoration: underline; 
    cursor: pointer; 
} 

這些解決方案的兩個解決眼前的問題，而無需任何額外的JavaScript。