问题：

Question

如果ng-repeat的$index == $scope.counter，则需要滚动到列表中的特定元素。

HTML：

<button type="button" ng-click="findA()">FIND TYPE A</button>
<button type="button" ng-click="findB()">FIND TYPE B</button>    
<ul class="feeds">
  <li ng-repeat="m in mList" ng-class="showActive($index)">{{m.s}}</li>
</ul>

JS：控制器：

$scope.shouldScroll = true; 

$scope.mList=[{"s":3},{"s":23},{"s":33},{"s":12},{"s":31},{"s":231}];
$scope.showActive =function(index){
        /* only if scope.counter == index ,, then set the class,, 
NEED : to scroll to this element where index == counter */
   if(index == $scope.counter){
       return 'activeMarkClass';
   }
   return '';
}

$scope.findA =function(){
   $scope.counter=2;
}
$scope.findB =function(){
   $scope.counter=5;
}

问题：

每当调用findA和findB时，使用li在counter上更改了showActive的css类。但我也想滚动到这个元素计数器。因此，当调用findA时，我希望滚动到第二项，并在调用findB时滚动到第五项。试过指令，但无法理解计数器将如何在那里使用。

注意：控制器中的其他一些方法也使用。因此无法在指令中完全移动counter。此外不要想要进行锚定滚动，因为已经有路由网址，需要window scroll/scrollTo

Answer 1

您必须为此编写指令并注意counter进行更新。一旦更新，您的指令就会通过索引（计数器）和scrollTo来查找元素。

以下是演示：http://jsfiddle.net/ZdunA/1/

myApp.directive('scrollTo', function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
         var $body = $('body');
         scope.$watch('counter', function(newVal, oldVal) {
             if (newVal && newVal !== oldVal) {
                 $body.scrollTop(element.find('li').eq(newVal).position().top)                     
             }                 
        });
    }
  };
});

angularjs在ng-repeat中滚动到计数器

问题：

1 个答案: