CODEWITHSUNDEEP
javascriptangularjssockets
NotAJohnDoe
NotAJohnDoe

Reputation: 125

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

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;
        };
    }]);

Upvotes: 0

Views: 212

Answers (1)

mcgraphix
mcgraphix

Reputation: 2733

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.

Upvotes: 1

Related Questions