當數據被加載以響應事件時，重新加載角表不起作用

我需要在另一個框架中通過調用parent.postMessage（「printComments」，「*」）來接收來自websocket的新數據時，「）：當數據被加載以響應事件時，重新加載角表不起作用

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

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

如果我打電話printOperation 內範圍功能，該表是正確更新，如果在反向我把它當我收到事件，表是未更新。如果它是一個Swift或Java程序，我會認爲我處於後臺線程中，JavaScript中是否存在這樣的概念，以及如何進入主線程？

來源

2017-08-04 Fabrizio Bartolomucci

我認爲你必須使用一個回調，因爲printOperation（）外的角度是不明確的，同時是越來越執行它。所以不知何故，你必須等待角鬥士的執行才能結束。 – Vivz

不，printOperation函數內部的控制檯消息實際上是打印的，所以它不僅被加載，而且被執行。這是非常自然的，因爲範圍函數一旦加載表就執行，而事件在事件發送後很晚纔到達。 –

自從您放置printOperation（）;在角度範圍內。試着把它放在外面，然後你就會明白我在說什麼。 – Vivz

您正試圖更新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); \t 
 
     
 
     //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>

來源

2017-08-04 09:52:44

@FabrizioBartolomucci您正在使用什麼AngularJS版本？ –

我正在獲取Uncaught TypeError：$ scope。$ applyAsync並且只是一行打印了兩個。對於這個問題，我還有Uncaught TypeError：$（...）。resizable是代碼的另一部分。 –

https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js 還有其他嗎？ –

感謝大家。這是工作液收集所有的那種建議：

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

來源

2017-08-04 11:09:59

你不應該接受我的回答嗎？既然它解決了最初的問題，但其他問題都是由'GetFromLocalStorage'方法產生的，它甚至在問題的正文中被註釋掉，甚至與問題本身沒有關係。 –

當數據被加載以響應事件時，重新加載角表不起作用

回答

相關問題