Question

我收到ws消息时设置结果有问题我有一个控制器，当我点击一些按钮时，它会调用getStops func。

在这个函数（getStops）中，当我收到消息时，我使用ws连接（在ws.onmessage）我需要得到 tramState['stop_id']并向$scope.current_stop提供帮助。

然后在ul列表中，相应的li应该变为活动状态但它不会发生，$scope.current_stop总是null。

问题出在哪里？感谢。

angular.module('tramApp').
    controller('tramController', ['$scope', 'tramAPIService', function($scope, tramAPIService) {
        $scope.trams = [];
        $scope.stops = [];
        $scope.active_tram = null;
        $scope.current_stop = null;

    $scope.getStops = function (tram_id) {
        tramAPIService.getStops(tram_id)
            .then(stops => $scope.stops = stops);

        $scope.active_tram = tram_id;

        const ws = new WebSocket(`ws://192.168.0.103:8080/tram_ws/?tram_id=${tram_id}`);

        ws.onmessage = (message) => {
            let tramState = JSON.parse(JSON.parse(message.data));
            $scope.current_stop = (tramState['stop_id'] !== "None") ? Number(tramState['stop_id']) : null;
            console.log(tramState);
        };
    };

    tramAPIService.getTrams()
        .then(trams => $scope.trams = trams);

}]);  


<ul class="list-group">
      <li
          class="list-group-item"
          ng-repeat="s in stops"
          ng-class="{'active': s.stop_id === current_stop}">
          {{ s.stop_id }}, {{ s.stop_name }}
      </li>
</ul>

Answer 1

问题是，您正在从AngularJS上下文更新角度$scope，其中angularjs不了解这些更改，因此更改不会反映在UI中。将$scope更新为绑定的过程称为摘要循环系统。在这种情况下，您必须手动触发此过程以查看屏幕上的更新。

您可以通过双向触发此过程

在$apply

$scope

或$timeout和$applyAsync方法。（首选方式）

ws.onmessage = (message) => {
    let tramState = JSON.parse(JSON.parse(message.data));
    $scope.$applyAsync(function(){
       $scope.current_stop = (tramState['stop_id'] !== "None") ? Number(tramState['stop_id']) : null;
    });
};

无法为$ scope变量分配ws响应

1 个答案: