Callback after updating a view in AngularJS

Question

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 ?

Community · Accepted Answer · 2017-05-23 11:57:20Z

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.

edited May 23, 2017 at 11:57

CommunityBot

11 silver badge

answered Oct 9, 2013 at 19:49

Boluc Papuccuoglu

2,3661 gold badge15 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Callback after updating a view in AngularJS

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related