是否有人对在有 Angular 的应用程序中实现滚动显示的最佳方法有任何想法?我从Twitter Bootstrap's implementation开始,但是我一直在努力寻找一个初始化插件(更重要的是在DOM更改后刷新)的好地方。

基本上,我的 Controller 在加载数据时会对数据进行异步请求,直到请求返回之前,它才能完全呈现DOM。然后,当DOM完全呈现后,需要刷新scrollspy插件。现在,一旦接收到所需的数据,我就让我的 Controller 在其作用域内广播一个事件,并且我有一条指令来拾取该事件。我不太喜欢这种解决方案,原因有两个

  • 感觉很hacky。
  • 当我在收到此事件后刷新scrollspy插件时,由于DOM直到周期的后期才更新,所以还为时过早。我尝试了evalAsync,但最后我不得不使用超时,只是希望DOM渲染足够快。

  • 我看了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

    10-05 21:02
    查看更多