Question

我有一个控制器，通过休息读取数据并将其显示在表格中 - 这部分工作正常。另外，我添加了一个WebSocket，并希望在Websocket接收数据时更新表。这是代码：

app.controller('allBookingsCtrl', function($scope, $http, currentUser){
    $scope.bookingsList = [];
    var ws = new WebSocket(wsRootUrl + '/allbookings');
    ws.onmessage = function(message){
        $scope.$apply(function(){
            $scope.bookingsList = message.data;
            alert(message.data);//displays correct data!
        });
    };
    $http.get(rootUrl + '/timetracker/booking/all').success(function(response) {
        $scope.bookingsList = response;
    });
});

问题是在应用调用时表未更新。我调试了并可以通过更改其他浏览器中的数据来触发onmessage。数据内容也正确，不会引发错误。

那么如何使用websocket收到的数据更新表/范围？

这里是html：

<table ng-controller="allBookingsCtrl" class="table">
        <thead>
            <tr>
                <th>#</th>
                <th>user</th>
                <th>project</th>
                <th>start</th>
                <th>end</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="booking in bookingsList">
                <td>{{$index + 1}}</td>
                <td>{{booking.usersProjects.user.name}}</td>
                <td>{{booking.usersProjects.project.name}}</td>
                <td>{{booking.start | date:'yyyy-MM-dd HH:mm:ss' }}</td>
                <td>{{booking.end | date:'yyyy-MM-dd HH:mm:ss' }}</td>
            </tr>
        </tbody>
    </table>

小编辑：如果我在消息的末尾添加alert(data);，我会看到包含正确数据的警报！因此，只有列表中的申请才能正常运作。

添加了plunkr 我尝试在plunkr中重现这一点并且没有websocket - 试图获得ng-click的更新。但这也不起作用 - 这里的点击没有做任何事情。

Answer 1

你能改变这一行

吗？

$scope.bookingsList = data;

到

$scope.bookingsList = message.data;

Angularjs数据不会在$ apply调用时更新

1 个答案: