从 Angular 控制器中的 webContents.send(..) 访问数据答案

【问题标题】：Access data from webContents.send(..) in Angular Controller从 Angular 控制器中的 webContents.send(..) 访问数据
【发布时间】：2017-05-04 16:20:25
【问题描述】：

我对 Electron 还很陌生，目前正在构建一个小型应用程序，该应用程序重用了我前段时间构建的 Angular 应用程序中的一些代码。

这是我想要做的事情：我有一个主 BrowserWindow（正在填充来自我使用 angular 访问的 web 服务的数据），当用户单击其中一个按钮时，我想打开另一个 BrowserWindow 并显示其中的一些数据（数据与用户点击的内容有关）。我想出了如何很好地打开另一个 BrowserWindow 以及如何将一些参数传递给它，请参见下面的代码示例。

当用户点击按钮时，这段代码正在执行，一个新的浏览器窗口打开。

const BrowserWindow = remote.BrowserWindow;
var cubeWindow = new BrowserWindow({ width: 800, height: 600, frame: false });
var cube = path.resolve(__dirname, '../cube.html');
cubeWindow.loadURL(cube);

var data = {
  id: "1",
  name: "this"
};

cubeWindow.webContents.on('did-finish-load', ()=> {
  cubeWindow.webContents.send('cube-data', data);
})

这里我访问新打开的 BrowserWindow 中的数据（这个 javascript 文件在 cube.html 中引用）：

require('electron').ipcRenderer.on('cube-data', (event, message) => {
    console.log(message);
});

数据对象的内容正在新的 BrowserWindow 中记录，到目前为止一切顺利。现在我的问题是：如何访问在 cube.html 中运行的 Angular 应用程序/控制器中的数据对象？

我试过这样做，但是没用：

var data;

require('electron').ipcRenderer.on('cube-data', (event, message) => {
    console.log(message);
    data = message;
});

angular.module('testApp', [])
    .controller('appCtrl', function($scope) {
        $scope.data = data;
        console.log('Data: ' + $scope.data);
    });

来自 Angular 控制器的日志条目显示数据未定义，我认为这是因为控制器实际上是在 ipcRenderer 发送/接收消息之前评估的？

有没有办法在 Angular 中访问发送的消息？

【问题讨论】：

标签： javascript angularjs electron

【解决方案1】：

尝试将cube-data 事件处理程序放在控制器代码中：

angular.module('testApp', [])
    .controller('appCtrl', function($scope) {
        $scope.model = {
            data: null
        }

        function attachCubeDataHandler() {
            require('electron').ipcRenderer.on('cube-data', (event, message) => {
                console.log(message);
                $scope.model.data = message;
            });
        }

        function initialize() {
            attachCubeDataHandler();
        }

        // Invoke initialization
        initialize();
    });

这样你首先初始化控制器，然后解析事件响应。此外，如果将代码放在控制器中，则可以直接使用$scope 来更新视图的数据。我用另一个对象 (model) 包裹了 data，以确保在 data 对象更改时视图会更新。

【讨论】：

这似乎不起作用，但我只是摆弄了几分钟。下班回家后会调查更多。我会在今天晚些时候更新。
好的，请告诉我您的进度。记得将视图中的引用从 data 更改为 model.data。

【解决方案2】：

好的，我想通了：基于 atom.io 上 jdfwarrior 的 post，我们必须使用一点 Angular $timeout hack 来使事情正常进行。在我将 PJDev 提供的代码 sn-p 更改为以下内容后，它起作用了。它现在记录消息的内容并将其显示在视图 (cube.html) 中。

angular.module('testApp', [])
    .controller('appCtrl', ['$timeout', '$scope', function($timeout, $scope) {
        $scope.model = {
            data: null
        }

        function attachCubeDataHandler() {
            require('electron').ipcRenderer.on('cube-data', (event, message) => {
                $timeout(function() {
                    $scope.model.data = message;
                    console.log("in timeout: " + message);
                },0);
            });
        }

        function initialize() {
            attachCubeDataHandler();
        }

        // Invoke initialization
        initialize();
    });

【讨论】：