0

I've been searching a lot for this question and I found some answers but none of them were compatible for my situation.

I am working on Chat Application and one of its functionalities is to show older messages for some chat channel. The element which holds the messages is <table> and it is set in <div> ,and I've set a fixed height and width for this div.

I bring channel's messages from SQL table by calling the appropriate servlet,and show them in the table using AngularJS .In this situation:is there a way in html/css/angular/javascript to scroll the div automatically after finishing to upload all the messages?

my code is like that:

HTML:

<div ng-show="channelmsg">
    <div  style="max-width: 500px; max-length: 500px; height: 500px; overflow: auto;" id="mydiv">
       <table>
            <tr ng-repeat="c in ChannelMsgResult">
                <td style="border: 1px; border-color =light gray; max-width:400px;">
                    <span><img ng-src={{c.Photo}} style="border-radius:0.5cm; width: 50px; height: 50px;" />
                        <a href="#" style="color: gray;"> {{ c.Nickname }} :</a> </span>
                        <br /> {{ c.Content }} &nbsp;&nbsp;&nbsp; <a href="#"><small>reply</small></a>
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="#">see replies</a> <br />
                        <label style="color: #9fa1a3;"><small>{{ c.DateTime }}</small></label>
                </td>
            </tr>
        </table>
    </div>
</div>

The Controller's function that calls the servlet and shows (by ng-show) the div "mydiv":

$scope.displayChannelMsg = function(x) {
     $http.get("http://localhost:8080/ExampleServletv3/displaychannelmsgservlet",{
            params:{
                channelid : x.ChanID
            }
        }).success(function(response) {
            setTimeout(function () {
              $scope.$apply(function(){
                console.log("went to servlet and succeeded")
                $scope.ChannelMsgResult = response;//this variable will hold the channels 
                $rootScope.channelmsg=true;

              });
            });
        });
};

Can I do this in a simple way without using any external libraries (like angular-glue)?

Please guide me.

Thanks

Tân
  • 1
  • 15
  • 56
  • 102
user6561572
  • 219
  • 3
  • 14

2 Answers2

1

Assign an id to each message and then use $anchorScroll("latest message id"); to scroll to the message

Shahzad
  • 1,677
  • 1
  • 12
  • 25
  • I added settimeout function and it worked: setTimeout(function () { $scope.$apply(function(){ $anchorScroll('below'); }); thank you }); – user6561572 Feb 25 '17 at 08:15
0

Can you try putting:

setTimeout(function () {
    var objDiv = document.getElementById("mydiv");
    objDiv.scrollTop = objDiv.scrollHeight;
}, 0);

after your first timeout function?

darthzejdr
  • 314
  • 1
  • 3
  • 12
  • Well, you need to run it after it fills your table. You could make it a function, but you'd still need to run it after fill. – darthzejdr Feb 21 '17 at 18:24
  • can you check: it deals with $scope.$apply: http://stackoverflow.com/questions/17225106/anyway-to-trigger-a-method-when-angular-is-done-adding-scope-updates-to-the-dom – darthzejdr Feb 21 '17 at 18:25
  • yes exactly ,but this is the problem ,how can I call this function from the html code without clicking any button? – user6561572 Feb 21 '17 at 18:27
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/136273/discussion-between-darthzejdr-and-shery). – darthzejdr Feb 21 '17 at 18:34