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

Question

我按照这个答案并举例说明：

如何以正确的方式在angular.js中实现scrollspy？

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

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