AngularJS - 在两个容器内滚动 - anchorScroll

Question

我有一个包含两列固定高度的页面。每列中的项目都是重复的。

如何在每列内滚动到某个ID？是否可以使用AngularJS？

代码

<div>
  Scroll to a position
  Column #: <input style="width: 20px;">  
  Item #: <input style="width: 20px;">
</div>

<div class='column'>Column one
  <div id="col-1-{{$index}}" class='item' ng-repeat='item in itemsOne track by $index'>
    {{$index}} ..... {{item}}
  </div> 
</div>
<div class='column'>Column two
  <div id="col-2-{{$index}}" class='item' ng-repeat='item in itemsTwo track by $index'>
    {{$index}} ..... {{item}}
  </div>
</div>

JS：

app.controller( 'myCtrl', [ '$scope', function ( $scope ){

  $scope.value = 'test';
  $scope.itemsOne = [];
  $scope.itemsTwo = [];

  for(var i=0; i<10; i++){
    $scope.itemsOne.push(makeSentence());
    $scope.itemsTwo.push(makeSentence());
  }

  function makeSentence() {
    var text = ""; 
    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

    for( var i=0; i < Math.random() * 200; i++ ){
      for( var i=0; i < Math.random() * possible.length; i++ )
          text += possible.charAt(Math.floor(Math.random() * possible.length));
      text += " ";
    }
    //console.log(text);
    return text;
  }

  $scope.scrollMeTo = function(column, row){
    // scroll me to an area in a column
  };

}] );

http://plnkr.co/edit/WYtntRagJdQoK7k6fAPc?p=preview

Answer 1

我改变了你的plunkr以使它工作，还有很大的改进空间，但请注意，当你需要处理DOM中的东西时，你必须总是使用指令来做，就像我做的那样：

app.directive('autoScrollTo', function () {
  return function(scope, element, attrs) {
    scope.$watch(attrs.autoScrollTo, function(value) {
      if (value) {
        var pos = $("#" +attrs.prefixId +value, $(element)).position().top + $(element).scrollTop() - $(element).position().top;
        $(element).animate({
            scrollTop : pos
        }, 1000);
      }
    });
  }
});

看到它正在运行：http://plnkr.co/edit/2gb8ZdZ5DPanRBVQvTwa?p=preview

希望有所帮助。