Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

du-scrollspy not working with dynamic content #154

Open
balasivagnanam opened this issue Oct 22, 2015 · 5 comments · May be fixed by #187
Open

du-scrollspy not working with dynamic content #154

balasivagnanam opened this issue Oct 22, 2015 · 5 comments · May be fixed by #187

Comments

@balasivagnanam
Copy link

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

@lukeify
Copy link

lukeify commented Nov 6, 2015

Also encountering this issue! Setting something dynamically simply results in du-scrollspy="".

@n-irwin
Copy link

n-irwin commented Nov 10, 2015

1+

@oblador
Copy link
Owner

oblador commented Nov 19, 2015

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.

@homerjam
Copy link
Contributor

homerjam commented Dec 3, 2015

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).

@mathielen
Copy link

I fixed it in #187

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

6 participants