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匿名函数，就像在try...catch中包装它一样。

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

Angular不更新视图的Web worker

1 个答案: