Angular JS and Web Sockets

Question

I am trying to get Angular JS working with web sockets, and after getting a basic set up from Angular web socket seed on Github, I am still facing a little problem with two way data binding. I am using a file like a config file, to set initial app values, which contains this:

  socket.emit('button:state', {
    state: 'default'
  });

Then I have a controller that deals with the state of the button initially, and then attempts to rewrite the initial state via the web socket:

function MyCtrl1($scope, socket) {

    // UI INITIAL STATE
    socket.on('button:state', function (data) {
        $scope.buttonState = data.state;
    });

    // UI CLICKED STATE
    $scope.buttonClicked = function(data) {
        //$scope.buttonState = 'clicked';
        socket.emit('button:state', {
            state: 'clicked'
        });
        console.log('button clicked');
    };
}
MyCtrl1.$inject = ['$scope', 'socket'];

The view is simply set up in Jade:

div(class='button', ng-class='buttonState', ng-click='buttonClicked()')

Can anyone shed some light, please?

Nothing really obvious here. I often find that setting a default value before any other of something like $scope.buttonState = '' or is useful to initialize and also keep track of variables that I use for state. Can you post the output of the Jade? — Mark Meyer
– Mark Meyer, Commented Jun 7, 2013 at 18:15

Ven · Accepted Answer · 2013-06-08 13:05:14Z

2

You're not in Angular's RunLoop. Try to add $scope.$apply(); after changing buttonState when you receive from the socket.

answered Jun 8, 2013 at 13:05

Ven

19k2 gold badges44 silver badges62 bronze badges

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

Collectives™ on Stack Overflow

Angular JS and Web Sockets

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related