angular 中的数组更改未更新 ng-repeat

Question

我的目标是使用 websockets to receive someJSON` 并更新指令中的 table。

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

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>

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

我想我正在学习运行，然后我才能有棱有角地走路！我缺少一些基本的东西吗？

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" 数据绑定和观察者等方式发生了什么。也许巧合的是，恰好在您的应用程序中发生了触发摘要的事件，您没有看到问题，但大多数时候您会看到。

一个 'better' 解决方案可能是围绕 websocket 编写一个包装器，在您在那里运行的任何回调之后调用 $rootScope.$digest。如果你没有做太多，那么这样做可能没问题。

angular 中的数组更改未更新 ng-repeat

ng-repeat not updated on array change in angular

javascript

angularjs

angularjs-directive

angularjs-ng-repeat