添加AngularJS後，Bootstrap Scrollpy無法正常工作

我將AngularJS添加到我現有的Web應用程序中，並且Scrollpy停止工作。以下是包含AngularJS控制器後的代碼。這是爲什麼失敗添加AngularJS後，Bootstrap Scrollpy無法正常工作

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

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

任何意見：

<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啓用？

來源

2016-12-25 Abhijith C S

它可能有一些做瓦特/的事實，你現在生成的頁面的部分動態（納克重複，尤其是）。當引導代碼運行時，Angular可能還沒有完成渲染頁面，並且引導程序JavaScript正在查找的元素尚不存在。看看這個問題，你也可以找到創建自己的人的例子... http://stackoverflow.com/q/14284263/398606 –

控制檯中的任何錯誤？ – Aravind

@Aravind，是的，你是對的:) –

你只是試試這個。

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>

來源

2016-12-26 05:44:25

當需要動態添加或刪除內容時，我需要手動刷新滾動條。我剛剛添加了一個函數來刷新1/2秒後滾動，它的工作。 –

添加AngularJS後，Bootstrap Scrollpy無法正常工作

回答

相關問題