1

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

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;
}

问题 ：

每当findAandfindB被称为 css 类时li，counter使用showActive. 但我也想滚动到这个元素计数器。因此，当findA调用 findB 时，我想滚动到第 2 项和第 5 项。尝试了指令，但不明白如何在那里使用计数器。

注意：计数器也被控制器中的一些其他方法使用。所以不能counter完全在指令中移动。也不想做锚滚动，因为那里已经有路由网址，需要一个window scroll/scrollTo

4

1 回答 1

2

您必须为此编写指令并注意counter更新。一旦更新，您的指令就会通过索引（计数器）找到元素并滚动到它。

这是一个演示：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)                     
             }                 
        });
    }
  };
});
于 2013-09-22T14:38:25.387 回答