如何滚动一个div，其内容由AngularDart管理？ [英] How to scrollTop a div whose content is managed by AngularDart?

问题描述

我有一个 div 持有一些聊天记录。我希望 div 内容在它变满时滚动。我有这个工作在另一个项目中使用jQuery，但什么是正确的AngularDart方法来实现这一点？

I have a div holding some chat history. I would like for the div content to scroll when it becomes full. I have this working using jQuery in another project, but what would be the proper AngularDart way to achieve this?

简化一点，在我的HTML我有

Simplifying a bit, in my HTML I have

<div class="chatHistory">{{ctrl.text}}</div>

（使用样式 white-space：pre ）和在我的控制器我有方法

(using style white-space:pre) and in my controller I have the method

void addToChatHistory(String msg) {
  text += msg;
  var elt = querySelector(".chatHistory");
  elt.scrollTop = elt.scrollHeight;
}

问题：

• 此代码滚动 div 内容，但不够，因为它也设置 scrollTop 很快;即，在 .chatHistory 之前可以由Angular更新。


• 除了这个（部分）解决方案不感觉非常Angular给定使用 querySelector 的样式。

• This code scrolls the div content but not quite enough because it sets the scrollTop too quickly; i.e., even before the .chatHistory can be updated by Angular.
• Besides this (partial) solution doesn't feel very Angular in style given the use of querySelector.

c $ c>在文本字段中输入，但也过早触发。建议

I tried setting up a watch on the text field but that also fires too early. Suggestions?

推荐答案

对于第一个问题，您可以使用 Timer.run 延迟滚动执行：

For the first issue you can use Timer.run to defer the scroll execution :

Timer.run(() => elt.scrollTop = elt.scrollHeight);

< querySelector ：

MyController(Element e) : elt = e.querySelector('.chatHistory');

这篇关于如何滚动一个div，其内容由AngularDart管理？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！