[英]Angular bootstrap scrollspy doesn't work with dynamic image content
I followed this answer and fork an example: 我按照这个答案并举例说明:
How to implement a scrollspy in angular.js the right way? 如何以正确的方式在angular.js中实现scrollspy?
My purpose is to populate dynamic content using template and there are images in there: 我的目的是使用模板填充动态内容,并且其中包含图像:
http://plnkr.co/edit/OKrzSr http://plnkr.co/edit/OKrzSr
**HTML code difference:(( ** 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 code difference: 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"
}]
});
It seems that the scrollspy
feature doesn't work as expected. 看来
scrollspy
功能无法正常工作。 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? 对解决此问题有帮助吗?
I wrote my own Scrollspy directive here https://github.com/quanghoc/angular-bootstrap-scrollspy 我在这里https://github.com/quanghoc/angular-bootstrap-scrollspy写了自己的Scrollspy指令
The key is to add this event 关键是要添加此事件
$rootScope.$on('scrollspy.refresh', function() {
refresh(attrs);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.