加载数据以响应事件时，重新加载角度表不起作用 [英] Reloading angular table does not work when the data is loaded in response to an event

问题描述

当需要通过调用parent.postMessage（printComments，*）在另一帧中接收来自websocket的新数据时，我需要填充一个角度表：

I need to populate an angular table when new data from a websocket is received in another frame by there calling parent.postMessage("printComments", "*"):

var app = angular.module('myapp', []);
var printOperation;

function GetFromLocalStorage(key) {
    var items = localStorage.getItem(key);
    console.log(items);
    if (items === null) {
        console.log("item null");
        return null;
    } else {
        if (typeof items != "string") {
            items = JSON.stringify(items);
        }
        return items;
    }
}

app.controller('MyCtrl',
    function ($scope) {
        $scope.printComments = function () {
            //$scope.obj=GetFromLocalStorage("AllComments");
            $scope.obj = [{
                "nome": "first",
                "status": 1,
                "testo": "Rottura rullo 1!!!"
            }, {
                "nome": "second",
                "status": 0,
                "testo": "Rottura rullo fsdfsf!!!"
            }];
            console.log("ricevo evento e ricarico tabella");
            console.log($scope.obj);
        };

        console.log("assegno print operation");
        printOperation = $scope.printComments;
        printOperation();
    }
);
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
eventer(messageEvent, function (e) {
    console.log("ricevo messaggio");
    printOperation();
}, false);		

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-controller="MyCtrl" ng-app="myapp">
<table ng-table="commentsTable">
  <tr ng-repeat="item in obj track by $index">
    <td class="plantCell">{{item.nome}}: </td>
    <td class="statusCell">{{item.status}}</td>
    <td class="statusCell">{{item.testo}}</td>
  </tr>
</table>
</div>

如果我在范围函数中调用内的printOperation ，则表格会正确更新，如果在我收到事件时调用它，则表格不会更新。如果它是一个Swift或Java程序，我会认为我在后台线程，Javascript中是否有这样的概念，我如何进入主线程？

If I call printOperation inside the scope function, the table is correctly updated, if on the reverse I call it when I receive the event, the table is not updated. If it were a Swift or Java program I would think I am on a background thread, is there such a concept in Javascript and how do I come to the main thread?

推荐答案

您正在尝试更新AngulraJS范围之外的数据（在事件侦听器中），这就是视图未显示更新值的原因。您需要使用 打包您的函数调用$ apply 或 '$ applyAsync'明确启动消化周期。查看一个工作示例：

You are trying to update the data outside of AngulraJS scope (in event listener) and that is why the view doesn't show the updated values. You need to wrap your function call with $apply or '$applyAsync' to start the digestion cycle explicitly. See a working example:

var app = angular.module('myapp', []);

app.controller('MyCtrl',
    function ($scope) {
        //initial data
        $scope.obj = [{
                "nome": "first",
                "status": 1,
                "testo": "Rottura rullo 1!!!"
            }];
            
        //this changes data
        $scope.printComments = function () {
            //$scope.obj=GetFromLocalStorage("AllComments");
            $scope.obj = [{
                "nome": "first",
                "status": 1,
                "testo": "Rottura rullo 1!!!"
            }, {
                "nome": "second",
                "status": 0,
                "testo": "Rottura rullo fsdfsf!!!"
            }];
            console.log("ricevo evento e ricarico tabella");
            console.log($scope.obj);
        };
        
        var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
        var eventer = window[eventMethod];
        var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
        eventer(messageEvent, function (e) {
            console.log("ricevo messaggio");
            //kick in $digest
            $scope.$apply($scope.printComments);
        }, false);	
        
        //emulate message in 3 secs
        setTimeout(function(){ window.dispatchEvent( new Event(messageEvent) ); }, 3000);
    }
);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-controller="MyCtrl" ng-app="myapp">
  <table>
    <tr ng-repeat="item in obj track by $index">
      <td class="plantCell">{{item.nome}}: </td>
      <td class="statusCell">{{item.status}}</td>
      <td class="statusCell">{{item.testo}}</td>
    </tr>
  </table>
</div>

这篇关于加载数据以响应事件时，重新加载角度表不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！