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 (2)
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?
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>
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>