1

我正在编写一个由后台进程和弹出窗口组成的 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()根本不做任何事情。

我怎样才能解决这个问题？

4

0 回答 0