使用socket.io的自更新角度工厂

Question

I'm trying to use an angular factory to provide a shared piece of state to my controllers. I also want this factory to automatically update its state by listening to a websocket. The goal is that I can write my data-fetching logic in one place, and then have the UI components update themselves automatically.

The problem I'm running into is that, while the factory is updating itself, the controllers never see the updates. Here's an example of what I'm trying to do:

app.factory('Socket', function () {
    var Socket = io.connect();
    return Socket;
});

app.factory('UpdateCounter', ['Socket', function (Socket) {
    var counter = 0;
    Socket.on('update', function () {
        counter += 1;
    });
    return counter;
}]);
app.controller('MyController', ['$scope','UpdateCounter', function ($scope,UpdateCounter) {
    $scope.counter = UpdateCounter;
    ...
}]);

MyController will see UpdateCounter = 0 and never see the changes.

I'm not surprised that this doesn't work, but I don't know why it doesn't work; nor do I know what I should be doing to get the behaviour I need.

Answer 1

You need to tell Angular that an update has occurred.

app.factory('UpdateCounter', ['Socket', '$rootScope', function (Socket, $rootScope) {
    var counter = 0;
    Socket.on('update', function () {
        counter += 1;
        $rootScope.$apply();
    });
    return counter;
}]);

Answer 2

There are a few ways you can do this. The first and simple is adding a watch so that the controller knows to watch the value for change.

app.controller('MyController', ['$scope','UpdateCounter', function ($scope,UpdateCounter) {
    $scope.$watch(function(){
        return UpdateCounter;
    }, function(newVal){
        $scope.counter = newVal;
    })
}]);

The second and probably better way is to return an object that can be referenced

app.factory('UpdateCounter', ['Socket', function (Socket) {
    var counter = { count: 0 };

    Socket.on('update', function () {
        counter.count += 1;
    });
    return counter;
}]);

app.controller('MyController', ['$scope','UpdateCounter', function ($scope,UpdateCounter) {
    $scope.counter = UpdateCounter;
}]);

In your view, you can reference counter.count to get the count and it will be automatically updated.