javascript - thread - w3schools angularjs sql




Il ricaricamento della tabella angolare non funziona quando i dati vengono caricati in risposta a un evento (2)

Grazie a tutti. Questa è la soluzione di lavoro che raccoglie tutti i suggerimenti gentili:

<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>

Ho bisogno di compilare una tabella angolare quando i nuovi dati da un websocket vengono ricevuti in un altro frame chiamando lì 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>

Se chiamo printOperation all'interno della funzione scope, la tabella viene aggiornata correttamente, se sul retro lo chiamo quando ricevo l'evento , la tabella non viene aggiornata. Se si trattasse di un programma Swift o Java, penserei che io sia su un thread in background, c'è un tale concetto in Javascript e come vengo nella discussione principale?


Stai cercando di aggiornare i dati al di fuori dell'ambito di AngulraJS (nel listener di eventi) ed è per questo che la vista non mostra i valori aggiornati. È necessario avvolgere la chiamata di funzione con $apply o '$ applyAsync' per avviare il ciclo di digestione in modo esplicito. Guarda un esempio di lavoro:

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>





html-table