CODEWITHSUNDEEP
angularjssocket.iopug
JohnRobertPett
JohnRobertPett

Reputation: 1183

Angular JS and Web Sockets

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?

Upvotes: 2

Views: 2114

Answers (1)

Ven
Ven

Reputation: 19039

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

Upvotes: 2

Related Questions