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

前端之家收集整理的这篇文章主要介绍了jquery-plugins – 在Angular模型更改后刷新Bootstrap ScrollSpy前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图使用 bootstrap scollspy突出显示由角度转发器生成的列表项.

我遇到的问题是,在将角度模型更改应用到视图之前,我正在从角度控制器刷新scrollspy插件.

在更新DOM本身(不仅仅是角度模型)之后,确保进行scrollspy(‘refresh’)调用的角度方法是什么?

模板:

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

控制器:

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

解决方法

在不了解滚动间谍的情况下,以下是您通常希望在Angular中使用JQuery插件方法: @H_301_8@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中:

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

以上示例非常通用,但它基本上将您的插件应用于元素,并且每次$scope.foo更改时调用’refresh’或其上的任何内容.

我希望有所帮助.

猜你在找的jQuery相关文章