1

In this simplified example, I have:

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

and a channel is an object containing:

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

In the .html, I have something similar to:

<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>

I'd like to implement automatic scrolling when a new message is added to channel.chatLog. What would be a proper way to do this with AngularJS? I can compute where to scroll to, but I need an event to fire when the chatLog is appended.

I was thinking of setting up a watch on the chatLog of every channel, but this becomes way too manual and I need to be careful about removing the watch as well. Another way would be to not rely on watches but make sure every place in the code that will append to a chatLog will also fire the event and provide some info about which channel the event relates to.

Also, when this event is fired, is there a way to access the div with the class "chatlog" in the code above for the given channel without assigning it a unique 'id' and looking it up by that?

Thanks in advance :)

4

1 回答 1

1

You could create a chatlog directive and add it to your markup like this:

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

Then in the linking function of your directive you can do something like:

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
  }
}
于 2013-08-18T07:58:01.193 回答