javascript - 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

我在这里写了我自己的 Scrollspy 指令https://github.com/quanghoc/angular-bootstrap-scrollspy

关键是添加这个事件

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