Question

我正在尝试使用角度工厂为我的控制器提供共享状态。我也希望这个工厂通过监听websocket自动更新其状态。目标是我可以在一个地方编写我的数据获取逻辑，然后让UI组件自动更新。

我遇到的问题是，当工厂自行更新时，控制器永远不会看到更新。以下是我正在尝试做的一个例子：

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将看到UpdateCounter = 0并且永远不会看到更改。

我并不感到惊讶，这不起作用，但我不知道为什么它不起作用;我也不知道自己应该做些什么来获得我需要的行为。

Answer 1

您需要告诉Angular已发生更新。

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

Answer 2

有几种方法可以做到这一点。第一个也是简单的是添加一个手表，以便控制器知道观察变化的价值。

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

第二种也许更好的方法是返回一个可以引用的对象

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

在您的视图中，您可以引用counter.count来获取计数，它将自动更新。

带socket.io的自动更新角度工厂

2 个答案: