scroll - 如何滚动内容由 AngularDart 管理的 div？

Question

我有一个 div拿着一些聊天记录。我想要 div内容满时滚动。我在另一个项目中使用 jQuery，但是 实现这一目标的正确 AngularDart 方法是什么？

简化一点，在我的 HTML 中我有

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

(使用样式 white-space:pre )并且在我的 Controller 中我有方法

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

问题:

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

此外，考虑到使用 querySelector，这个(部分)解决方案在风格上感觉不是很 Angular。 .

我尝试设置 watch在 text场，但这也太早了。建议？

Answer 1

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

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

对于第二个问题，您可以注入(inject) Controller 管理的元素并使用 querySelector在上面 :

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