AngularJS服务从Chrome扩展程序内容脚本接收数据有时不会更新视图 [英] AngularJS service receiving data from a Chrome Extension content script sometimes won't update view
问题描述
我一直对铬扩展，它从内容脚本将数据发送到运行的应用程序角度另一部分页面。自从我分开我的应用程序分为几个控制器依赖于数据服务时，我碰到一个错误：有时我的应用程序的模板都将显示正确，但其他时候它不会。在这个简单的例子，我的应用程序可能会在一个运行在页面上显示的数据值，然后刷新页面，并运行相同的code后不显示。
I've been working on a Chromium extension which sends data from a content script to another extension page which runs an Angular app. Since I separated my app into several controllers relying on a data service, I've run into a bug where sometimes my app's templates will all display correctly but other times it will not. In this simplified example, my app might display the data value on the page on a run and then not display it after refreshing the page and running the same code.
在这种情况下，当数据的不的显示，我还可以检查在运行时DataService的对象，并找到数据值被正确实例化。
In the case when the data is not displayed, I can still inspect the DataService object at runtime and find the data value to be instantiated correctly.
app.js
angular.module('angularApp', [])
.controller('AppController', ['$scope', 'DataService',
function($scope, dataService) {
$scope.dataService = dataService;
}]);
service.js
service.js
var angularApp = angular.module('angularApp');
angularApp.service('DataService', function() {
var data = [];
chrome.runtime.onMessage.addListener(function(message, sender) {
var messageData = $.extend([], message.data);
// populate data array based on messageData
});
};
view.html
view.html
<html ng-app="angularApp">
<body ng-controller="AppController">
{{dataService.data}}
</body>
</html>
这似乎是从内容脚本消息的异步到来的一个问题，但我不能确定我的角度服务中解决这个问题的适当方法。一个理想的答案能解释这是怎么回事，使我的错误和最佳实践来构建我的服务和控制器的工作每次都如预期。
This seems to be an issue with the asynchronous arrival of the message from the content script, but I'm not sure of the appropriate way to solve this within my Angular service. An ideal answer would explain what is going on to cause my bug and the best practice to build my service and controllers to work as expected every time.
推荐答案
您控制器和视图的罚款。如果你这样做你的服务应该工作：
Your controller and view are fine. Your service should work if you do this:
angular.module('angularApp').service('DataService',['$timeout',
function($timeout){
var self = this;
this.data = [];
var tmp;
function handleMessage(){
//tmp == message.data
//populate self.data however..
}
chrome.runtime.onMessage.addListener(function(message,sender){
tmp = message.data;
$timeout(handleMessage);
});
}]);
它不是当前工作的原因是因为该事件处理函数不是在角的事件循环执行。这样做在 $超时数据操作这将迫使角度来更新已更改的数据视图。
The reason it isn't working currently is because the event handler isn't executing in angular's event loop. By doing the data manipulation in a $timeout it will force angular to update the view with the data that has changed.
使用 $超时基本上具有如 $范围相同的效果。$适用（）在这种情况下
Using $timeout essentially has the same effect as $scope.$apply() in this scenario
这篇关于AngularJS服务从Chrome扩展程序内容脚本接收数据有时不会更新视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
