我试图使用
bootstrap scollspy突出显示由角度转发器生成的列表项.
我遇到的问题是,在将角度模型更改应用到视图之前,我正在从角度控制器刷新scrollspy插件.
在更新DOM本身(不仅仅是角度模型)之后,确保进行scrollspy(‘refresh’)调用的角度方法是什么？
模板：
<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>
控制器：
$scope.httpSuccessCallback = function (data)
$scope.addresses.push(data);
$('[data-spy="scroll"]').scrollspy('refresh'); //calls $('#addressList .nav > li > a')
}
解决方法
在不了解滚动间谍的情况下,以下是您通常希望在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’或其上的任何内容.
我希望有所帮助.