angularjs滾動到ng-repeat中的計數器

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被稱爲CSS類的li上counter改變，使用showActive 。但我也想滾動到這個元素計數器。所以當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)      
      }     
     }); 
    } 
    }; 
});