Question

在我的角度服务中，我通过WebSocket连接到我的服务器并接收一些实时更新。通过$rootScope.$broadcast我将这些更新广播给在应用程序中收听的任何人。

        function handleTickerMessage(msg){
            //console.log(JSON.stringify(msg));
            $rootScope.$broadcast(config.events.ticker, msg);
        }

在控制器中我正在订阅该事件并更新一些局部变量

    $scope.mainPair = {
        name: '',
        buy: 110.00,
        sell: 80.00
    };

    $scope.$on(config.events.ticker, function(event, ticker){
       if (config.mainPage.prodPair === ticker.prodPair){
           $scope.mainPair.name = config.mainPage.prodPair;
           $scope.mainPair.buy = parseFloat(ticker.bid);
           $scope.mainPair.sell = parseFloat(ticker.ask);
       }
    });

在html文件中我尝试显示这些新值

<span><i class="down"></i><em>{{mainPair.buy | currency}}</em></span>

但由于某种原因，他们没有显示。我知道我的$on已被调用，if正在运行。那么为什么UI没有更新？

有趣的是，如果我在点击事件中访问mainPair中的值

    $scope.signUp = function (){
        console.log('buy: ' + $scope.mainPair_buy);
        return;
     }

然后我确实获得了最后一个值并且UI已更新!!!

那么为什么在事件发生时UI不会更新？

THX

Answer 1

如果您从angular.js框架之外调用handleTickerMessage，则必须将其包装在$scope.$apply中。

例如，您正在使用的任何WebSocket代码都必须执行：

socket.on('someevent', function(msg){
   $rootScope.$apply(function(){
       handleTickerMessage.call(null, msg));
   });
});

查看$rootScope的文档：

<强> $申请（[曝光]）;
$ apply（）用于从角度框架外部以角度执行表达式。（例如，来自浏览器DOM事件，setTimeout，XHR或第三方库）。因为我们正在调用角度框架，所以我们需要执行异常处理的适当范围生命周期，执行监视。

$ scope。$ on won更新UI

1 个答案: