Angularjs controller doesn't work when socket.io event is in there

Question

I have a socket.io event being initialized on connection that is supposed to change value of items inside this controller (it controls chart). But when there is mySocket.on it doesn't work at all, don't render anything in this controller. When I take it out it works just fine. mySocket is a proper function, I'm using it in other controllers without any problems.

.controller('KnobCtrl', ['$scope', function($scope, mySocket) {
        $scope.itemsCounter = 0;
        $scope.roundValue = 0;

        mySocket.on('newConnectionCounter', function (itemsInRoundCounter, valueOfRound) {
            $scope.itemsCounter = itemsInRoundCounter;
            $scope.roundValue = valueOfRound;
        });

        $scope.data = {
            value: $scope.itemsCounter,
            options: {
            width: 190,
            fgColor: "#FFAB40",
            skin: "tron",
            thickness: .3,
            displayPrevious: false,
            readOnly: true,
            max: 30,
                inputColor: "#ffffff"
        }
        };
        $scope.options = {
            width: 150,
            fgColor: "#ffec03",
            skin: "tron",
            thickness: .8,
            displayPrevious: false,
            readOnly: true,
            max: 50
        };

        $scope.formatOptions = function(data) {
            data.formattedOptions = JSON.stringify(data.options).replace(/,/g,"\n");
            return data;
        };
    }]);

mcgraphix · Accepted Answer · 2015-11-24 18:27:16Z

1

It looks like you are expecting it to be injected into your controller function, but you are missing the string in the array passed to the .controller method:

.controller('KnobCtrl', ['$scope', function($scope, mySocket) {
    ...
 });

Any arguments to that function should be represented in the array:

 .controller('KnobCtrl', ['$scope', 'mySocket', function($scope, mySocket) {
    ...
 });

This assumes that "mySocket" is something that exists in the "Angular world" (created with angular.service, angular.factory, etc.). If "mySocket" is just some globally defined function, then you don't want it listed as an argument. If nothing is passed in that argument, it would be undefined even if it exists globally. Note: if it is just a globally defined object outside of Angular, you will likely need to call $scope.$apply() to kick of a digest cycle in your handler.

Take a look at the places where it is working in your app and see how you injected it into your controller.

answered Nov 24, 2015 at 18:27

mcgraphix

2,7331 gold badge14 silver badges15 bronze badges

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

4 Comments

NotAJohnDoe Over a year ago

You're indeed right. I was missing 'mySocket'. It is working flawlessly right now, thanks!

NotAJohnDoe Over a year ago

But I'm facing another problem: inside $scope.data the value parameter doesn't take data from $scope.itemsCounter. It is 0 all the time (but outside $scope.data it is showing correct value). Any idea what I am missing here?

mcgraphix Over a year ago

The way the code is currently, $scope.data is being set with the value of $scope.itemsCounter when the controller is constructed. Because the socket response will be asynchronous, you will need to handle pushing the new value into $scope.data in you socket handler: $scope.data.value = itemsInRoundCounter;

NotAJohnDoe Over a year ago

Thank you a lot, I really appreciate that! It indeed fixed this.

Collectives™ on Stack Overflow

Angularjs controller doesn't work when socket.io event is in there

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related