jquery-plugins - Angular 模型更改后刷新 Bootstrap ScrollSpy

Question

我正在尝试使用 bootstrap scollspy突出显示由 Angular 转发器生成的列表项。

我遇到的问题是，在 angular 将模型更改应用于 View 之前，我正在从 angular Controller 刷新 scrollspy 插件。

确保在 DOM 本身更新后发生 scrollspy('refresh') 调用的 Angular 方式是什么(不仅仅是 Angular 模型)？

模板:

<div class="span2" id="addressList">
    <ul class="nav nav-tabs nav-stacked affix">
       <li ng-repeat="addr in addresses"><a href="#{{addr.id}}">{{addr.id}}</a></li>
    </ul>
</div>

Controller :

$scope.httpSuccessCallback = function (data) 
     $scope.addresses.push(data);
     $('[data-spy="scroll"]').scrollspy('refresh'); //calls $('#addressList .nav > li > a')
 }

Answer 1

在不了解滚动 spy 的情况下，以下是您通常希望在 Angular 中使用 JQuery 插件的方式:

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>

上面的例子非常通用，但它基本上会将你的插件应用到一个元素上，并在每次 $scope.foo 更改时调用'refresh'或其他任何东西。

我希望这会有所帮助。