Bootstrap Scrollpy not working after adding AngularJS

Question

I added AngularJS to my existing web application and the Scrollpy stopped working. The following is the code after including AngularJS controllers.

<div class="container bs-docs-container">
    <div class="row">

        <div class="col-md-3" ng-controller="MenuController">  

            <div class="bs-sidebar hidden-print affix-top" role="complementary">
                <ul class="nav bs-sidenav quickMenu">
                <h3 class="quickMenuHead">Quick Menu</h3>
                <hr></hr>                          
                    <li ng-repeat="item in menu" class="">
                        <a href="#{{item.mainType}}">{{item.mainName}}</a>
                        <ul class="nav">
                            <li ng-repeat="sub in item.submenu" class="">
                                <a href="#{{item.mainType}}-{{sub.subType}}">{{sub.subName}}</a>
                            </li>
                        </ul>
                    </li> 
                </ul>                   

            </div>
        </div>

And the Scrollpy was enabled via JS:

$body.scrollspy({
  target: '.bs-sidebar',
  offset: 40
})

$window.on('load', function () {
  $body.scrollspy('refresh')
})

Any comments why this is failing?

It might have something to do w/the fact that you are now generating parts of the page dynamically (the ng-repeat, in particular). When the bootstrap code runs, Angular may not have finished rendering the page, and elements that the bootstrap javascript is looking for do not exist yet. Check out this question, you can also find examples of people creating their own... stackoverflow.com/q/14284263/398606 — Sunil D.
– Sunil D., Commented Dec 25, 2016 at 20:22
I will need to manually refresh the scrollspy when content is added or removed dynamically. I just added a function to refresh the scrollspy after 1/2 seconds and it worked. — Abhijith C S
– Abhijith C S, Commented Dec 26, 2016 at 7:10

Karthick Nagarajan · Accepted Answer · 2016-12-26 05:44:25Z

0

You just try this.

app.directive('scrollSpy', function (){
   return {
     restrict: 'A',
     link: function(scope, elem, attr) {
         elem.scrollSpy({ /* set up options here */ });

         //watch whatever expression was passed to the
         //scroll-spy attribute, and refresh scroll spy when it changes.
         scope.$watch(attr.scrollSpy, function(value) {
              elem.scrollSpy('refresh');
         });
     }
   };
});

Then in HTML:

<div scroll-spy="foo">Do something with: {{foo}}</div>

answered Dec 26, 2016 at 5:44

Karthick Nagarajan

1,3462 gold badges15 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Abhijith C S Over a year ago

I will need to manually refresh the scrollspy when content is added or removed dynamically. I just added a function to refresh the scrollspy after 1/2 seconds and it worked.

Collectives™ on Stack Overflow

Bootstrap Scrollpy not working after adding AngularJS

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related