Question

首先，我想说我使用 socket.io 并用数据发送它们。数据在连接时发出（因此网站不是空白）以及何时发生。在这种情况下，在连接（页面刷新）上一切都更新并且工作得很好。在网站上有两个问题：

roundValue不是实时更新，仅在页面刷新时
当$scope.data.value（圆环图的值）增加所有内容时

有效，但是一旦我想让它回到0并重新开始它就不起作用了。它开始闪烁，从新的不同值获取每秒20次的数据（因此图表始终从值0-30变化，闪烁）。

我的控制器（最后几部分并不重要）：

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

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

        mySocket.on('addItemCounterIO', function(roundItems, valueofRound) {
            $scope.data.value = roundItems;
            $scope.roundValue = totalValue;
        });

        mySocket.on('newRoundCounter', function() {
            $scope.data.value = 0;
            $scope.roundValue = 0;
        });

        $scope.data = {
            value: 0,
            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;
        };
    }]);

页面上的值并不重要我猜，他们只是从$scope.roundValue和$scope.data.value开始。

Answer 1

问题是，来自socket.io的异步事件不会触发Angular的摘要周期。通常，Angular的原生$ http，$ timeout等服务都会自动触发摘要周期。当您使用Angular的外来事件源时，您需要自己触发摘要周期。在更新范围属性后，尝试在socket.io事件处理程序中调用$scope.$digest()。

例如：

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

另一种可以达到同样效果的味道：

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

你也可以使用像angular-socket-io这样的包装来免费获取摘要周期。

对于您提到的第二个问题，如果没有看到mySocket服务的实现方式，很难说清楚。

角度不刷新/改变值

1 个答案: