Bootstrap Scrollpy не работает после добавления AngularJS

Question

Я добавил AngularJS к существующему веб-приложению, и Scrollpy перестала работать. Ниже приведен код после включения контроллеров AngularJS.

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

И Scrollpy был включен с помощью JS:

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

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

Любые комментарии, почему это не удается?

Answer 1

Вы просто попробуете это.

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'); 
     }); 
    } 
    }; 
}); 

Тогда в HTML:

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