0

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?

Aravind
  • 40,391
  • 16
  • 91
  • 110
Abhijith C S
  • 89
  • 1
  • 9
  • 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... http://stackoverflow.com/q/14284263/398606 – Sunil D. Dec 25 '16 at 20:22
  • any errors in the console? – Aravind Dec 26 '16 at 05:29
  • @Aravind, yeah you were correct :) – Abhijith C S Dec 26 '16 at 07:10
  • 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 Dec 26 '16 at 07:10

1 Answers1

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>
Karthick Nagarajan
  • 1,327
  • 2
  • 15
  • 27
  • 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 Dec 26 '16 at 07:09