Bootstrap AngularJSを追加した後にスクロールが機能しない

Question

私は既存のWebアプリケーションに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

これを試してみてください。 HTMLで次に

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

：それはあなたが今、（特に、NG-リピート）動的にページの一部を生成しているという事実/ wの何かがあるかもしれません

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