添加 AngularJS 后，Bootstrap Scrollpy 无法正常工作答案

【问题标题】：Bootstrap Scrollpy not working after adding AngularJS添加 AngularJS 后，Bootstrap Scrollpy 无法正常工作
【发布时间】：2016-12-25 18:46:08
【问题描述】：

我将 AngularJS 添加到我现有的 Web 应用程序中，但 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')
})

任何 cmets 为什么这会失败？

【问题讨论】：

这可能与您现在正在动态生成页面的某些部分（尤其是 ng-repeat）有关。当 bootstrap 代码运行时，Angular 可能还没有完成页面的渲染，并且 bootstrap javascript 正在寻找的元素还不存在。查看这个问题，您还可以找到人们创建自己的示例...stackoverflow.com/q/14284263/398606
控制台有错误吗？
@Aravind，是的，你是对的 :)
在动态添加或删除内容时，我需要手动刷新滚动间谍。我刚刚添加了一个在 1/2 秒后刷新滚动间谍的功能，它起作用了。

标签： angularjs scrollspy

【解决方案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>

【讨论】：

在动态添加或删除内容时，我需要手动刷新滚动间谍。我刚刚添加了一个在 1/2 秒后刷新滚动间谍的功能，它起作用了。