带有Angular的Web Worker无法更新视图

Question

我有两个文件1）app.js 2）worker.js

我尝试更新$ scope.time，但视图中未显示。 这是我第一次接触网络工作者。

app.js

angular.module('App', [])

.controller('MainCtrl', ['$scope', '$window', function($scope, $window) {

    $scope.time = 100;

    var worker = new Worker('worker.js');

    worker.onmessage = function(e) {

        $scope.time = e.data.time;

      };

    worker.postMessage($scope.time);

}]);

worker.js

 self.onmessage = function(e) {
 var time = e.data;

 var timer = setInterval(toDo,1000);

 function toDo(){

   time = time-1;
   postMessage({
     time:time
   });

  }

}

Answer 1

触发worker.onmessage ，它将不在Angular摘要周期内。 因此，即使您已经更新了模型，Angular也不知道它需要更新视图。 为了通知Angular必须进行新的摘要循环，您需要调用$scope.$apply()

worker.onmessage = function(e) {
   $scope.$apply(function(){ 
      //do model changes here
      $scope.time = e.data.time;
   });        
};

无需将匿名函数传递给$scope.$apply即可进行更改，然后不带任何参数调用$scope.$apply() 。 但是我相信最好将匿名函数与$apply一起$apply因为它在幕后将工作包裹在try...catch 。

$scope.time = e.data.time;
$scope.$apply();