Question

我正在学习Electron，并建立了自己的＆＃34; hello world＆＃34;类型的应用程序。 我开始像一小时前那样学习它，所以任何noob友好的提示都非常受欢迎。

我决定将angularjs + angular材料加入样式并看看它是如何工作的。现在我发送通知的代码片段不起作用。这提出了一个问题。

如何将angularjs中的点击事件发送给电子？

以下是所有文件的示例代码

main.js 从get-started电子github页面复制

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 //渲染器文件，用于在包含angularjs + material lib之前工作和发送通知

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

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

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

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文件

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

如果我删除Angularjs和Material，ctrl.js可以正常工作并发送通知。

Answer 1

回答我自己的问题，让事情正常工作只需将代码放在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 个答案: