如何在Angularjs + Electron中使用eventListeners？

Question

I am learning Electron and built my own "hello world" type application that works. 我正在学习Electron，并构建了自己的有效的“ hello world”类型应用程序。 I started learning it like an hour ago so any noob friendly tips are highly appreciated. 我像一个小时前一样开始学习它，因此非常感谢任何菜鸟友好的提示。

I decided to include angularjs + angular material to style it and see how it works. 我决定包括angularjs +角材料对其进行样式设置，并查看其工作原理。 Now my piece of code that sends notification isn't working. 现在，我发送通知的代码无法正常工作。 That raised a question. 这就提出了一个问题。

How do I send click events from angularjs to electron? 如何将点击事件从angularjs发送到电子？

Here is the sample code from all files 这是所有文件中的示例代码

main.js copied from get-started electron github page 从入门电子github页面复制的main.js

const electron = require('electron');
const {ipcMain} = require('electron');
// Module to control application life.
const {app} = electron;
// Module to create native browser window.
const {BrowserWindow} = electron;

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win;



function openInbox() {
  win.loadURL('https://inbox.google.com/?pli=1');
}

function createWindow() {
  // Create the browser window.
  win = new BrowserWindow({width: 1366, height: 768});

  // and load the index.html of the app.
  win.loadURL(`file://${__dirname}/index.html`);
  win.openDevTools();

  // Emitted when the window is closed.
  win.on('closed', () => {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    win = null;
  });
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow);

// Quit when all windows are closed.
app.on('window-all-closed', () => {
  // On OS X it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  // On OS X it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (win === null) {
    createWindow();
  }
});

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

ctrl.js // renderer file that used to work and send notifications prior to including angularjs + material lib ctrl.js //用于在包含angularjs +材质库之前工作和发送通知的渲染器文件

const {ipcRenderer} = require('electron');

const button = document.getElementById('button');

button.addEventListener('click', evt => {
  new Notification('Angular Material FTW!');
});

index.html index.html

<!DOCTYPE html>
<html ng-app="webApp">
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.7/angular-material.min.js"></script>
    <script src="angular-main.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.7/angular-material.min.css">
  </head>
  <body layout-align="center center" layout-padding>
    <h1 id="hello">Hello World!</h1>
    <div></div>
    <md-button class="button md-raised md-primary">Click Me</md-button>
  </body>
  <script src="ctrl.js"></script>
</html>

angular-main.js Angular file angular-main.js Angular文件

(function() {
  angular
    .module('webApp', ['ngMaterial'])
    .config(themeConfiguration)
    .controller('appCtrl', appCtrl);

  function themeConfiguration($mdThemingProvider) {
    $mdThemingProvider.theme('default')
      .primaryPalette('blue', {
        'default': '500'
      })
      .accentPalette('red')
      .warnPalette('deep-orange')
      .backgroundPalette('grey', {
        'default': '100'
      });
  }

  function appCtrl() {
    var vm = this;

    vm.notification = function Notification(evt) {
      new Notification('Hello angular');
    };
  }
})();

If I remove Angularjs and Material the ctrl.js works and send notification just fine. 如果删除Angularjs和Material，则ctrl.js可以正常工作并发送通知。

Answer 1

Answering my own question, to make things work just place code inside angularjs Controller function like this 回答我自己的问题，要使事情正常进行，只需将代码放在这样的angularjs Controller函数中

  function appCtrl() {
    var vm = this;

    const button = document.getElementById('button');

    button.addEventListener('click', evt => {
      new Notification('Angular Material FTW!');
    });
  }

如何在Angularjs + Electron中使用eventListeners？

问题描述

1 个解决方案

解决方案1
0 2016-05-12 15:17:24

如何在Angularjs + Electron中使用eventListeners？

问题描述

1 个解决方案

解决方案1 0 2016-05-12 15:17:24

解决方案1
0 2016-05-12 15:17:24