angular-scroll
angular-scroll copied to clipboard
du-scrollspy not working with dynamic content
Thanks for this awesome plugin.
I am trying to use this with a list of navigation links and goes to a list of div with ids dynamically populated.
This is my code below,
<div class="row" id="pagewrap">
<div class="col-md-3 xs-hidden sm-hidden">
<ul class="components-left-bar" id="sidebar">
<li ng-repeat="section in userneeds.sections" du-scrollspy="{{section.id}}"><a href="#{{section.id}}" du-smooth-scroll du-scrollspy>{{section.name}}</a></li>
</ul>
</div>
<div class="col-md-9 col-sm-12 col-xs-12">
<div class="component-sections" ng-repeat="section in userneeds.sections">
<h3 class="component-section-title" id="{{section.id}}">{{section.name}}</h3>
<div class="component-section">
<div class="component-section-inner" ng-repeat="innersection in section.innersections">
<div class="component-general">
<h3 class="section-title">{{innersection.header}}</h3>
<p>{{innersection.description}}</p>
<ul class="ext-links" ng-repeat="extlink in innersection.links">
<li><a href={{extlink.linkPath}}>{{extlink.linkContent}}<i class="fa fa-external-link"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
I tried various combinations like
<a href="#{{section.id}}" du-smooth-scroll du-scrollspy="{{section.id}}">{{section.name}}</a>
<a href="#{{section.id}}" du-smooth-scroll du-scrollspy>{{section.name}}</a>
<li ng-repeat="section in userneeds.sections" du-scrollspy="{{section.id}}"><a href="#{{section.id}}" du-smooth-scroll du-scrollspy>{{section.name}}</a></li>
but no luck.
I found this similar plunker and I see it not working. Not sure what is going wrong here.
http://plnkr.co/edit/RlNCNvOQAc1hmoCPlTTo?p=preview
Also encountering this issue! Setting something dynamically simply results in du-scrollspy=""
.
1+
Hi guys,
This is probably easily fixed by an $observe
statement, I currently don't have enough time to look into the matter more thoroughly but I'm accepting PRs.
In case this helps I had a similar issue but realised that due to the way I had my ui-views and components setup the component that contained the scrollspy was being initialised twice. The weird thing was that although the components template was replaced the scrollspy directive only ran the first time - it therefore referenced a different element (one that had been replaced).
I fixed it in #187