Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 1

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

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

感谢大家。这是收集所有建议的工作解决方案：

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

加载数据以响应事件时，重新加载角度表不起作用

2 个答案: