ng-repeat在角度数组更改时未更新

Question

我的目标是使用websockets to receive some JSON`并更新指令中的表。

我创建了一个简单的指令：

app.directive("penaltyTable", function() {
return {
    restrict: 'E',
    templateUrl: '/Content/AngularPartials/Coach/PenaltyLine.html',
    controller: function() {
        this.players = [];
        var penaltyController = this;

        var uri = "ws://localhost.local/api/CoachesTracker/10";

        //Initialize socket
        var websocket = new WebSocket(uri);

        // Error handling stuff here.....

        //Socket message handler
        websocket.onmessage = function (event) {
            var data = JSON.parse(event.data);
            penaltyController.players = data;
        };
    },
    controllerAs: 'penaltyTrackerCtrl'
};
});

我创建了一个简单的模板PenaltyLine.html

<table class="penalty-table">
    <tr ng-repeat-start="player in penaltyTrackerCtrl.players">
        <td>{{player.Number}}</td>
    </tr>
    <tr ng-repeat-end>
        <td>{{player.Name}}</td>
    </tr>
<table>

我的Web套接字从服务器上接收数据正常，似乎正在更新播放器数组，但是模板从未更新以显示新数据。

我想我要学会跑步才能弯腰走路！ 我缺少一些基本的东西吗？

Answer 1

您需要触发摘要。 一种安全的方法是使用$ timeout，且延迟时间为0。 您还可以在$ scope。$ apply中调用代码（检查摘要是否尚未运行）。 $ timeout虽然难看，但通常是首选。

app.directive("penaltyTable", function($timeout) {
return {
    restrict: 'E',
    templateUrl: '/Content/AngularPartials/Coach/PenaltyLine.html',
    controller: function() {
        this.players = [];
        var penaltyController = this;

        var uri = "ws://localhost.local/api/CoachesTracker/10";

        //Initialize socket
        var websocket = new WebSocket(uri);

        // Error handling stuff here.....

        //Socket message handler
        websocket.onmessage = function (event) {
            $timeout(function() {
                var data = JSON.parse(event.data);
                penaltyController.players = data;
            });
        };
    },
    controllerAs: 'penaltyTrackerCtrl'
};
});

原因是AngularJS不知道您的websocket只是收到一条消息，因此也不知道以“ Angular”的数据绑定和监视程序等方式发生了任何事情。也许，巧合的是，您的应用程序中发生了一些事情来触发只是在那一刻的摘要，您看不到问题，但是大多数时候您会发现。

更好的解决方案可能是在websocket周围编写一个包装，该包装在运行任何回调后都调用$ rootScope。$ digest。 如果您没有做太多，那么最好还是这样做。