Angular bootstrap scrollspy不适用于动态图像内容

Question

我按照这个答案并举了一个例子：

How to implement a scrollspy in angular.js the right way?

我的目的是使用模板填充动态内容，其中有图像：

http://plnkr.co/edit/OKrzSr

** HTML代码区别：（（

    <div ng-repeat="item in items">
      <h4 id="{{ item.id }}">{{ item.id }}</h4>
      <p ng-repeat="img in [1,2,3,4,5]"><img ng-src="{{ item.src }}"></p>
    </div>

Javascript代码差异：

angular.module('scrollSpyPlunk')
  .controller('scrollSpyCtrl', function ($scope, $anchorScroll)
{
$scope.items = [{
  "id": "section1",
  "src": "http://placehold.it/400x400"
},{
  "id": "section2",
  "src": "http://placehold.it/400x400"
},{
  "id": "section3",
  "src": "http://placehold.it/400x400"
}]
});

似乎scrollspy功能无法按预期工作。当我向下滚动时，它过早地激活了菜单方式。我认为它只将图像视为一行文字。我不确定。

有任何帮助来解决这个问题吗？

Answer 1

我在https://github.com/quanghoc/angular-bootstrap-scrollspy

编写了我自己的Scrollspy指令

关键是添加此事件

$rootScope.$on('scrollspy.refresh', function() {
  refresh(attrs);
});