$ window.addEventListener未在角度觸發

Question

當消息到達通知新數據准備就緒時，我試圖刷新角度表。 我試圖按照以下提示使用此代碼： 偵聽Angularjs服務中的窗口事件 ，但是在命令時甚至沒有收到該事件：

 parent.postMessage("printComments", "*");

由框架中的另一頁發送。

什么事

<div ng-controller="MyCtrl" ng-app="myapp">
        <table ng-table="commentsTable">
            <tr ng-repeat="item in obj.data 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 {
                if (typeof items!= "string") {items = JSON.stringify(items);}
                    return items;
                }
            }
            app.service('servicename', function($window, $rootScope) {
                function subsFunc() {
                        $window.addEventListener('printComments',
                            function(e) {
                                alert("arriva evento");
                                $rootScope.$broadcast('app.clickEvent', e);
                             });
                    }
                    return {
                            "subscribeMe": subsFunc
                    }
            });
            app.controller('MyCtrl',
                function($scope,servicename) {
                    $scope.data = {};
                        $scope.printComments = function() {
                //$scope.obj=GetFromLocalStorage("AllComments");
                            $scope.data.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.data.obj);

                        }
                        servicename.subscribeMe();
                        $scope.$on('app.clickEvent', function(a, b) {
                            console.log("evento");
                            alert("on received");
                            $scope.printComments();
                    });
                }
            )

Answer 1

您的代碼中有一些錯誤。 我將其固定在代碼段中。 $ window對象中沒有事件printComments ，因此我將其更改為出於演示目的而加載 ，您可以根據需要進行更改。

您忘記將服務注入到控制器中，因此未注冊事件偵聽器。此行：

servicename.subscribeMe（）;

 // Create IE + others compatible event handler var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent"; var eventer = window[eventMethod]; var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message"; // Listen to message from child window eventer(messageEvent,function(e) { console.log('parent received message!: ',e.data); $(window).trigger(e.data); },false); 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.service('servicename', function($window, $rootScope) { function subsFunc() { //$($window).on("printComments", function(e){ $($window).on("printComments", function(e) { alert("arriva evento"); $rootScope.$broadcast('app.clickEvent', e); }); } return { "subscribeMe": subsFunc }; }); app.controller('MyCtrl', function($scope,servicename,$timeout) { $scope.data = {}; $scope.printComments = function() { //$scope.obj=GetFromLocalStorage("AllComments"); $scope.data.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.data.obj); }; servicename.subscribeMe(); $scope.$on('app.clickEvent', function(a, b) { console.log("evento"); alert("on received"); $timeout(function(){ $scope.printComments(); }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/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 servicename> <tr ng-repeat="item in data.obj track by $index"> <td class="plantCell">{{item.nome}}: </td> <td class="statusCell">{{item.status}}</td> <td class="statusCell">{{item.testo}}</td> </tr> </table> <iframe src="//sample ifream with postmessage script"></iframe> </div> 

Answer 2

您的控制器在哪里？ 您需要在js中定義控制器

 var app = angular.module('myapp', []); app.controller("MyCtrl", function($scope) { $scope.obj = [{nome:"Sss"}] }) 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.service('serviceName', function($window, $rootScope) { function subsFunc() { $rootScope.printComments = function() { //$rootScope.obj=GetFromLocalStorage("AllComments"); $rootScope.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($rootScope.obj); } $window.addEventListener('printComments', function(e) { console.log("ricevo evento"); $rootScope.printComments(); }) } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myapp" ng-controller="MyCtrl"> <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>