从Angular Controller中的webContents.send（..）访问数据 [英] Access data from webContents.send(..) in Angular Controller

问题描述

对于Electron来说我还很陌生，目前正在构建一个小型应用程序，该应用程序可以重用我之前构建的Angular应用程序中的一些代码。

这是我要尝试的操作：当用户单击时，我有一个主BrowserWindow（正在用我使用angular访问的来自Web服务的数据填充）我要打开另一个BrowserWindow并在其中显示一些数据的按钮之一（数据与用户单击的内容有关）。我想出了如何很好地打开另一个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，名称： 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中访问发送的消息？

post 由atom.io上的 jdfwarrior 发布，我们必须使用一些Angular $超时黑客使事情工作。在将PJDev提供的代码段更改为以下代码之后，它就起作用了。现在，它将记录消息的内容，并在视图（cube.html）中显示它。

  angular.module（'testApp'，[]）.controller（'appCtrl'，['$ timeout'，'$ scope'，function（$ timeout，$ scope）{$ scope.model = {数据：null}函数attachCubeDataHandler（）{require（'electron'）。ipcRenderer.on（'cube-data'，（event，message）= >> {$ timeout（function（）{$ scope.model.data = message ;; console.log（ in timeout： + message）;}，0）;}）;}函数initialize（）{attachCubeDataHandler（）;} //调用初始化initialize（）;}）;  

I am pretty new to Electron and am currently building a small application that reuses some code from an Angular application that I built some time ago.

Here is what I am trying to do: I have one main BrowserWindow (that is being filled with data from a webservice which I access using angular), when the user clicks one of the buttons I want to open another BrowserWindow and display some data in it (the data is related to what the user clicked). I figured out how to open another BrowserWindow just fine and also how to pass some arguments to it, see code sample below.

This code is being executed when the user clicks the button, a new BrowserWindow opens.

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);
})

Here I access the data in the freshly opened BrowserWindow (this javascript file is referenced in cube.html):

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

The content of the data object is being logged in the new BrowserWindow, so far so good. Now to my question: How do I get access to the data object in an Angular app/controller that is running in cube.html?

I tried to do it like this, but that doesn't work:

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);
    });

The log entry from the Angular controller says data is undefined, I assume that is because the controller is actually evaluated before the message is sent/received by the ipcRenderer?

Is there a way to access the sent message in Angular?

解决方案

Ok I figured it out: Based on this post by jdfwarrior on atom.io we have to use a little Angular $timeout hack to make things work. After I changed the code snippet provided by PJDev to the following, it worked. It now logs the content of the message and also displays it in the view (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();
    });

这篇关于从Angular Controller中的webContents.send（..）访问数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！