Cannot bind data from AngularJS factory

Question

I am new with AngularJS, and take webSocket example as base for my application https://github.com/AngularClass/angular-websocket/tree/master/example Application should take jSon data from webSocket and populate UI. Example contains factory with colection variable, and binding gives result on HTML template, but when I add searchStatus variable I cannot see its auto update (Binding) on UI. Why?

    <div ng-app="portScanner">
        <h2>Port scanner</h2>

        <div ng-controller="SimplePortScannerController">

            Status : {{ searchStatus }}

            <form ng-submit="submit(address)">
                <input type="text" ng-model="address" autofocus required>
                <button type="submit">Check ports</button>
            </form>

        {{sum}}<br>

        <div ng-repeat="message in Messages.collection | orderBy:'-timeStamp' track by $index">
            <!--{{message.statusString}}-->
            {{message}}
            <br>
        </div>

        </div>
    </div>

Java script code

var angularApp = angular.module("portScanner", ['ngWebSocket']);

angularApp.controller('SimplePortScannerController', function ($scope, Messages) {
    $scope.sum = 0;
    if ($scope.address==null){
        $scope.address = "192.168.0.1";
    }
    $scope.Messages = Messages;
    $scope.submit = function (address_message) {
        if (!address_message) {
            return;
        };
        Messages.send({
            address : address_message
        });
        $scope.sum = $scope.sum + 1;
    };
});

angularApp.factory('Messages', function ($websocket) {
    var ws = $websocket('ws://localhost:8080/portscanner2/scanner');
    var collection = [];
    var searchStatus;

    ws.onMessage(function (event) {
        console.log('message: ', event);

        messageJson = angular.fromJson(event.data);
        if (messageJson.statusString){
            searchStatus = messageJson.statusString;
        }

        collection.push(angular.fromJson(event.data));
    });

    ws.onError(function (event) {
        console.log('connection Error', event);
    });

    ws.onClose(function (event) {
        console.log('connection closed', event);
    });

    ws.onOpen(function () {
        console.log('connection open');
    });

    // setTimeout(function () {
    //  ws.close();
    // }, 300000)

    return {
        collection: collection,
        searchStatus: searchStatus,
        // status : function () {
            // return ws.readyState;
        // },
        send : function (message) {

            if (angular.isString(message)) {
                ws.send(message);
            } else if (angular.isObject(message)) {
                ws.send(JSON.stringify(message));
            }
        }

    };
});

Thanks!

Why are you using SimplePortScannerController as simpleCtrl yet referencing $scope? — Phil
– Phil, Commented Nov 26, 2015 at 5:31
Yes, right, I will update and left just SimplePortScannerController, without as. — P_M
– P_M, Commented Nov 26, 2015 at 6:42

Phil · Accepted Answer · 2015-11-26 05:27:58Z

1

Because searchStatus: searchStatus in the return object loses its reference when you execute searchStatus = messageJson.statusString;, it will always remain undefined in Messages.

Simply create your factory's return object earlier and update that instead of the individual variables. For example

var ws = $websocket('ws://localhost:8080/portscanner2/scanner'),
    obj = {
        collection: [],
        searchStatus: null,
        send: function(message) { /* no change here */ }
    };

ws.onMessage(function (event) {
    console.log('message: ', event);

    messageJson = angular.fromJson(event.data);
    if (messageJson.statusString){
        obj.searchStatus = messageJson.statusString;
    }

    obj.collection.push(angular.fromJson(event.data));
});

// etc

return obj;

Also, your template should have

Status : {{ Messages.searchStatus }}

answered Nov 26, 2015 at 5:27

Phil

166k25 gold badges265 silver badges269 bronze badges

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

3 Comments

P_M Over a year ago

Thanks, it works. Just changed coma to semicolon in first line. Why searchStatus loses reference, but collection not? Should I read somewhere? Is this because collection not created, but just pushed?

Phil Over a year ago

@Pavlo yes, that's it exactly. The collection variable is never re-assigned, thus maintaining the reference. Also, you shouldn't have to replace the comma; what I have in my answer is correct syntax

P_M Over a year ago

Yes, it works with comma also. I just realized the both (comma or semicolon) actually means the same here. I missed because never use such syntax for multiple variable creation. Thanks a lot

Collectives™ on Stack Overflow

Cannot bind data from AngularJS factory

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related