Angular bootstrap scrollspy不适用于动态图像内容(Angular bootstrap scrollspy doesn't work with dynamic ima

Angular bootstrap scrollspy不适用于动态图像内容(Angular bootstrap scrollspy doesn't work with dynamic image content)

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

如何以正确的方式在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功能无法按预期工作。 当我向下滚动时，它过早地激活了菜单方式。 我认为它将图像视为一行文本。 我不确定。

有什么帮助解决这个问题？

I followed this answer and fork an example:

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

My purpose is to populate dynamic content using template and there are images in there:

http://plnkr.co/edit/OKrzSr

**HTML code difference:((

<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 code difference:

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

It seems that the scrollspy feature doesn't work as expected. It activated the menu way too early when I scroll down. I think it treated images as just one line of text. I am not sure.

Any help to fix this?

最满意答案

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

关键是要添加此事件

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

I wrote my own Scrollspy directive here https://github.com/quanghoc/angular-bootstrap-scrollspy

The key is to add this event

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