Angularjs model changes after websocket data push from server

Question

I'm trying to change my angular model after a websocket push from the server. How is it possible to change values like $scope.contacts each time the server serves new data..?

I'm not sure if it is possible by using $apply. I know that I can access the DOM element retrieve the scope and then change the values, but there should be a better solution!

I'm really interested in a solution to update the angular model from outside without creating angular modules since I'm using relative data sources that emit change events. Is there no simple way to do that like in Backbone.js where you can say:

var book = new Backbone.Model({ title: 'value' });
book.set("title", "A Scandal in Bohemia");

What I want in angularjs is something like:

function MyController($scope) {
    $scope.contacts = [];
}

datasource changed -> function () {
    MyController.set('contacts', 'value'); // change angular scope property
}

@Jimbo Your answer is exactly what I'd already described in my question. I'm searching for an easier way, but I think writing my own factory module is the best solution. — Pascal Bayer
– Pascal Bayer, Commented Nov 20, 2013 at 12:32

Maxim Grach · Accepted Answer · 2013-02-05 09:01:24Z

11

Look at socket.io angular service:

angular.module('app')
  .factory('socket', ['$rootScope', function ($rootScope) {

    var socket = io.connect();

    return {
      on: function (eventName, callback) {
        socket.on(eventName, function () {  
          var args = arguments;
          $rootScope.$apply(function () {
            callback.apply(socket, args);
          });
        });
      },
      emit: function (eventName, data, callback) {
        socket.emit(eventName, data, function () {
          var args = arguments;
          $rootScope.$apply(function () {
            if (callback) {
              callback.apply(socket, args);
            }
          });
        })
      }
    };

  }]);

and controller using it:

angular.module('app')
  .controller('Controller', ['$scope', 'socket', function ($scope, socket) {

    socket.emit('register')

    socket.on('register', function (data) {
        $scope.data = data;
    });

}]);

answered Feb 5, 2013 at 9:01

Maxim Grach

4,2882 gold badges22 silver badges19 bronze badges

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

2 Comments

Pascal Bayer Over a year ago

That's a really nice example but it will not work in my case, since I'm synchronizing data with Collections on the client and these Collections emit the change events. I can change to code to get it working with your suggestion, but what I really want to have is scope.contacts = db.collection('contacts').find('favorites'); and set the angular model property every time my collection is updated and then call this code.

Maxim Grach Over a year ago

Which db you are using on client? Does find() have callback function? Could you show full source of client?

Ajay Singh Beniwal · Accepted Answer · 2013-02-05 08:37:49Z

2

just do it like below

 socket.onmessage = function (event) {
     scope.$apply(function(){
       // modify scope values here 
     }
    };

answered Feb 5, 2013 at 8:37

Ajay Singh Beniwal

19k11 gold badges84 silver badges100 bronze badges

3 Comments

Pascal Bayer Over a year ago

Correct me if I'm wrong but when I have retrieved my scope I can simply change values by scope.variable = 'value'. My question is about how to retrieve the scope I want to change on a simple way.

Ajay Singh Beniwal Over a year ago

have u created a angular service for making websocket request

Jimbo Over a year ago

+1 Great find @Ajaybeniwal - I've combined your code above with the ability to retrieve the scope of an element within your own JS and put it in a new answer below :)

Jimbo · Accepted Answer · 2013-10-24 16:25:47Z

1

Well, the marked answer is certainly not a "simple way" as requested by OP. Here's a much simpler solution.

Retrieve the scope wherever you want in your own JavaScript code:

var scope = angular.element($("#elementID")).scope();

Change a value in your Angular $scope variable, but from your external JavaScript:

scope.$apply(function() {
    scope.yourArrayForExample.push({name: 'New, external value'});
});

Here's a JSFiddle.

answered Oct 24, 2013 at 16:25

Jimbo

26.7k16 gold badges93 silver badges135 bronze badges

Collectives™ on Stack Overflow

Angularjs model changes after websocket data push from server

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related