Angular array not updating view

Question

I am implementing a chat module using angularJs, socketIo. (and nodeJS for backend).

In angular there is array attached to scope: $scope.messages. For a chat client all messages are pushed into this array, and this array is rendered in the view using ng-repeat.

<div class="chat-window">
    <div class="chat-message" ng-repeat="message in messages track by $index">{{message}}        </div>
</div>

However, when i push elements into 'messages' array, it is not getting rendered, unless there is a keypress or mouse event. I have checked and there no keypress or mouse event listeners. The view is somehow now getting updating automatically.

Can someone suggest me the problem?

Try by running $scope.$apply() after elements are pushed into the $scope.messages array. — Gilsha
– Gilsha, Commented Nov 11, 2014 at 5:31

tarzanbappa · Accepted Answer · 2014-11-11 05:39:32Z

1

I think you have push your data using ajax.

jQuery ajax is out of capability of angular, you need to wrap like below, it will tell the $scope.message is going to update and update the view also..

after you push the data try applying...

$scope.$apply(function(){
    $scope.message= data;
});

answered Nov 11, 2014 at 5:39

tarzanbappa

4,98623 gold badges79 silver badges121 bronze badges

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

Comments

Sachin Nikumbh · Accepted Answer · 2016-07-19 13:27:22Z

0

Following code work for me, Whenever you get new message from socket you just need to bind your (UI updations related) code inside $scope.$apply() function

 socket.on = function (e) {

            $scope.$apply(function () {

                //user code to update UI

            });

        };

answered Jul 19, 2016 at 13:27

Sachin Nikumbh

1,07912 silver badges13 bronze badges

Collectives™ on Stack Overflow

Angular array not updating view

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related