I recently came across an answer that guided me to fork an example for implementing scrollspy in Angular.js. My goal is to populate dynamic content using a template that includes images. You can find the example here:
Here are the code differences:
<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>
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"
}]
});
However, it seems that the scrollspy feature is not functioning as expected. It activates the menu too early while scrolling down, possibly due to how it interprets images. I'm seeking guidance on how to rectify this issue. Any suggestions?