是否有人对在有 Angular 的应用程序中实现滚动显示的最佳方法有任何想法?我从Twitter Bootstrap's implementation开始,但是我一直在努力寻找一个初始化插件(更重要的是在DOM更改后刷新)的好地方。
基本上,我的 Controller 在加载数据时会对数据进行异步请求,直到请求返回之前,它才能完全呈现DOM。然后,当DOM完全呈现后,需要刷新scrollspy插件。现在,一旦接收到所需的数据,我就让我的 Controller 在其作用域内广播一个事件,并且我有一条指令来拾取该事件。我不太喜欢这种解决方案,原因有两个
我看了the Bootstrap plugin的源代码,从头开始实现它似乎很简单。我遇到的问题是,当我尝试为其创建指令时,我似乎无法订阅链接函数中接收到的元素中的滚动事件。
有没有人找到类似这样的好解决方案,或者有人有任何建议吗?我绝不依赖于使用Bootstrap实现,到目前为止,我对Bootstrap的唯一了解就是我刚刚添加的scrollspy-plugin。
最佳答案
在Angular中使用Scrollspy存在一些挑战(可能是为什么AngularUI截至2013年8月仍不包括Scrollspy的原因)。
对DOM内容进行任何更改时,都必须刷新scrollspy。
这可以通过$ watch元素并为scrollspy('refresh')调用设置超时来完成。
如果希望能够使用nav元素导航可滚动区域,则还需要覆盖nav元素的默认行为。
这可以通过在 anchor 元素上使用preventDefault来防止导航,以及将ScrollTo函数附加到ng-click来实现。
我在Plunker上提供了一个工作示例:http://plnkr.co/edit/R0a4nJi3tBUBsluBJUo2?p=preview