Update data of AngularJS controller

Question

I'm writing a simple AngularJS script to load data from a socket.io event and then add it to the ng template, this is my JS:

// Socket.io logic:
var messages = [];
socket.on("chat message", function(message){
    messages.push(message); //message = {username: String, text: String}
});

// AngularJS logic:
var app = angular.module("chat", []);
app.controller("MessagesCtrl", function ($scope) {
    $scope.messages = messages;    
})

Now I'd like to understand how to update my ng template when a new message is added to my messages[]...

This is an example fiddle with one attempt: http://jsfiddle.net/v8v67ohn/1/
As you can see, clicking the button nothing happens...

What am I doing wrong?

friedi · Accepted Answer · 2014-10-11 08:55:15Z

1

Use ng-click instead of setting a new MessagesCtrl in a jQuery event handler.

You can do this like this:

JS:

var app = angular.module('myApp', []);

app.controller('MessagesCtrl', function ($scope) {
    $scope.messages = [{username: "foo", text: "hi"}, {username: "bar",text: "hey"}, {username: "foo",text: "LOL"}]    

    $scope.onClick = function() {
        $scope.messages = [{username: "foo", text: "hi"}, {username: "bar",text: "hey"}, {username: "foo",text: "LOL"}, {username: "new one", text: "Hi all, I'm new here"}]
    };
});

HTML:

<body ng-app="myApp" ng-controller="MessagesCtrl">
    <script type="text/ng-template" id="message.html">
        <b>{{message.username}}</b>: {{message.text}}
    </script>        
    <div>
        <div ng-repeat="message in messages" ng-include="'message.html'">
        </div>
    </div>
    <button id="click" ng-click="onClick()">aaaa</button>
</body>

See the jsfiddle-demo

answered Oct 11, 2014 at 8:55

friedi

4,3601 gold badge15 silver badges19 bronze badges

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

2 Comments

Fez Vrasta Over a year ago

Thanks! What if I wan to call "onClick" on the socket.io event?

friedi Over a year ago

You have to notify angularjs that you changed the messages array. Therefore put the socket code block in your controller and make an $apply call like this: $scope.$apply(function() { $scope.messages.push(message); }); More information about $apply: sitepoint.com/understanding-angulars-apply-digest

Harutyun Abgaryan · Accepted Answer · 2014-10-11 09:03:13Z

1

Use on button click ng-click="newData()" function

<button id="click" ng-click="newData()">aaaa</button>

And Set in your controler

$scope.newData=function(){


 $scope.messages = [{username: "foo", text: "hi"}, {username: "bar",text: "hey"}, {username: "foo",text: "LOL"}, {username: "new one", text: "Hi all, I'm new here"}]
}

answered Oct 11, 2014 at 9:03

Harutyun Abgaryan

2,0231 gold badge14 silver badges15 bronze badges

Collectives™ on Stack Overflow

Update data of AngularJS controller

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related