Question

在这个简化的例子中，我有：

$scope.channels = [channel1, channel2, ...]

并且频道是包含以下内容的对象：

chatLog: ["msg1", "msg2", ...]

在.html中，我有类似的内容：

<div ng-repeat="channel in channels" ng-show="channel.isActiveWindow">
    <div class="chatlog" style="height:500px;">
        <div ng-repeat="msg in channel.msgLog">
            <div>{{msg}}</div>
        </div>
    </div>
</div>

我想在将新消息添加到channel.chatLog时实现自动滚动。使用AngularJS做什么是正确的方法？我可以计算滚动到的位置，但是当附加chatLog时我需要触发一个事件。

我正考虑在每个频道的chatLog上设置一个手表，但这太过手动了，我也需要小心移除手表。另一种方法是不依赖手表，但要确保代码中附加到chatLog的每个位置也会触发事件并提供有关事件与哪个频道相关的信息。

此外，当这个事件被触发时，有没有办法在给定频道的上面代码中使用“chatlog”类访问div，而没有为它分配一个唯一的'id'并查找它？

提前致谢：）

Answer 1

您可以创建一个chatlog指令并将其添加到您的标记中，如下所示：

<div chatlog ng-repeat="msg in channel.msgLog">

然后在您的指令的链接功能中，您可以执行以下操作：

link: function(scope, element, attrs) {
  if (scope.$last) {
    // this will run each time the channel.msgLog array changes
    // more precisely, every time the last element is linked
  }
}

使用AngularJS自动滚动多个聊天记录

1 个答案: