Сохранять положение прокрутки, когда модель обновляется в угловых 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.