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>

我的网络套接字从服务器接收数据OK，似乎更新了播放器阵列，但模板永远不会更新以显示新数据。

我觉得我在学会跑步之前才能走弯角！我有什么基本的遗失吗？

Answer 1

您需要触发摘要。这样做的一种安全方法是使用带有0次延迟的$ timeout。您还可以调用$ 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只是收到了一条消息，因此并不知道＆＃34; Angular＆＃34;数据绑定和观察者的方式等等。也许，巧合的是，你的应用程序中发生的事情恰好在那一刻触发了一个摘要而且你没有看到问题，但大多数时候你会看到。

A＆＃39;更好＆＃39;解决方案可能是在websocket周围编写一个包装器来调用$ rootScope。$ digest在你运行的任何回调之后。如果你做得太多，那么这样做可能会很好。

ng-repeat没有更新角度的阵列变化

1 个答案: