Bootstrap 添加后 Scrollpy 不工作 AngularJS

Question

我将 AngularJS 添加到我现有的 Web 应用程序，但 Scrollpy 停止工作。以下是包含AngularJS个controller后的代码。

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

Bootstrap 添加后 Scrollpy 不工作 AngularJS

Bootstrap Scrollpy not working after adding AngularJS

angularjs

scrollspy