0

I just started learn AngularJS, and I created a little web app in order to exercise myself. It's a "chat", so the user write a message which is stored in a message array in the $scope. Now I would like to move the scrollbar to the bottom when a message is displayed to the view (<p ng-repeat="message in messages">{{message.user}}: {{message.text}}). So I've done something like :

$scope.messages.push(obj);
$("#messages").prop({scrollTop: $("#messages").prop("scrollHeight")}); // jQuery method, is there something like that in AngularJS ?

But, it doesn't work. The jQuery method itself works, but I think that at the moment it is invoked, the wiew hasn't been updated (is that right ?). What can I do so that the method is called every update of this view ?

DarkChipolata
  • 925
  • 1
  • 10
  • 29

1 Answers1

1

I recently asked a similar question and the accepted answer solved my issue: How to call a function when Angular is done updating the layout because of data changes

Basically, I wrap the function to be called in another function. The outer function checks $scope.$$phase . If it is still apply or digest, I use $timeout to reinvoke the outer function in 100 ms. If not, then I call the function.

Community
  • 1
  • 1
Boluc Papuccuoglu
  • 2,318
  • 1
  • 14
  • 24