angularjs - 如何在AngularJS中保留ng-repeat的滚动位置？

Question

DEMO

对象列表使用ng-repeat呈现。假设此列表很长，并且用户滚动到底部以查看一些对象。

当用户观察对象时，新项目将添加到列表的顶部。这导致被观察对象改变其位置，即，用户在被观察对象的相同位置突然看到其他东西。

添加新项目后，如何将观察到的对象保持在同一位置？

PLAYGROUND HERE

Answer 1

通过使用scrollTop的div属性，可以解决得很优雅。我使用了两个指令-一个处理包装器元素的滚动位置，另一个处理新元素。
如果有什么不清楚的地方请给我喊。

DEMO

JS:

.directive("keepScroll", function(){

  return {

    controller : function($scope){
      var element = null;

      this.setElement = function(el){
        element = el;
      }

      this.addItem = function(item){
        console.log("Adding item", item, item.clientHeight);
        element.scrollTop = (element.scrollTop+item.clientHeight+1);
       //1px for margin from your css (surely it would be possible
       // to make it more generic, rather then hard-coding the value)
      };

    },

    link : function(scope,el,attr, ctrl) {

     ctrl.setElement(el[0]);

    }

  };

})

.directive("scrollItem", function(){

  return{
    require : "^keepScroll",
    link : function(scope, el, att, scrCtrl){
      scrCtrl.addItem(el[0]);
    }
  }
})

HTML:

<div class="wrapper" keep-scroll>
  <div class="item" scroll-item ng-repeat="item in items  | orderBy: '-id'">
    {{ item.name }}
   </div>
</div>