javascript - ng-repeat 未根据 Angular 数组变化进行更新

Question

我的目标是使用 websockets 接收一些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>

我的网络套接字从服务器接收数据正常，似乎更新了玩家数组，但模板从未更新以显示新数据。

我想我是在学会运行之前才能用 Angular 走路!我缺少一些基本的东西吗？

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 刚刚收到一条消息，因此不知道数据绑定(bind)和观察者等的“Angular”方式中发生了什么。也许，巧合的是，你的 websocket 中发生了一些事情应用程序在那一刻触发摘要，您不会看到问题，但大多数时候您会看到。

一个“更好”的解决方案可能是在 websocket 周围编写一个包装器，在运行任何回调之后调用 $rootScope.$digest。如果你没有做得太多，那么这样可能就可以了。