javascript - pasar - Volver a cargar la tabla angular no funciona cuando los datos se cargan en respuesta a un evento

pasar parametros entre componentes angular 4

Question

Necesito rellenar una tabla angular cuando los datos nuevos de un websocket se reciben en otro marco al llamar 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>

Si llamo a printOperation dentro de la función de alcance, la tabla se actualiza correctamente, si en el reverso la llamo cuando recibo el evento , la tabla no se actualiza. Si se tratara de un programa Swift o Java, creo que estoy en un hilo de fondo, ¿existe ese concepto en Javascript y cómo llego al hilo principal?

Answer 1

Está intentando actualizar los datos fuera del alcance de AngulraJS (en el detector de eventos) y es por eso que la vista no muestra los valores actualizados. Debe completar su llamada de función con $apply o ''$ applyAsync'' para comenzar el ciclo de digestión de forma explícita. Vea un ejemplo de trabajo:

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>

Answer 2

Gracias a todos. Esta es la solución de trabajo que recopila todas las sugerencias amables:

<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js">
</script>
</head>

<body>
<html>
        <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>
        <script language="javascript">
            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 {
                    items = JSON.parse(items);
                    return items;
                }
            }
            var app = angular.module(''myapp'', []);

            app.controller(''MyCtrl'',
                    function ($scope) {
                    $scope.printComments = function () {
                            $scope.obj=GetFromLocalStorage("AllComments");
                    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");
                            $scope.$applyAsync($scope.printComments);
                    }, false);  
                }
        );      
        </script>