Question

我正在编写一个由后台进程和弹出窗口组成的chrome扩展程序。后台进程不断地使ajax请求获取新数据，弹出窗口显示信息。

以极简化的方式，background.js过程如下所示：

var Background = {
    data: {},
    poll: function() {
        $.ajax({
            url: 'some_url',
            success: function(data) {
                this.data = data;
                chrome.extension.sendMessage('update');
            }.bind(this)
        });
    },
    startPolling: function() {
        setInterval(this.poll.bind(this), 10000);
    }
};
$(Background.startPolling.bind(Background));

每隔10秒拍摄一次ajax请求，获取一些数据，并将其设置为Background.data。同样，这是非常简化的。您可以在成功回调中看到sendMessage来电。

我的popup.js看起来像这样，也非常简化：

var Background = chrome.extension.getBackgroundPage().Background;

angular.module('App', [])
    .controller('PopupCtrl', function PopupCtrl($scope) {

        $scope.data = Background.data;

        chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
            if (request == 'update') {
                console.log('update');
                $scope.$apply();
            }
        });

    });

当然，popup.html看起来像是：

<html ng-app="App" ng-csp>
    <body ng-controller="PopupCtrl">
        <p>{{data.title}}</p>
        <p>{{data.body}}</p>
        <p>{{data.date}}</p>
    </body>
</html>

肯定会收到消息，因为我可以看到"update"每10秒间隔打印到控制台。我也知道数据正在正确更新，因为如果我关闭并重新打开弹出窗口，新数据会正确显示。所以$scope.$apply()根本就没有做任何事情。

我该如何解决这个问题？

$ scope。$ apply在Chrome扩展程序弹出窗口中没有执行任何操作

0 个答案: