[英]How do I use eventListeners with Angularjs + Electron?
我正在學習Electron,並構建了自己的有效的“ hello world”類型應用程序。 我像一個小時前一樣開始學習它,因此非常感謝任何菜鳥友好的提示。
我決定包括angularjs +角材料對其進行樣式設置,並查看其工作原理。 現在,我發送通知的代碼無法正常工作。 這就提出了一個問題。
如何將點擊事件從angularjs發送到電子?
這是所有文件中的示例代碼
從入門電子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 //用於在包含angularjs +材質庫之前工作和發送通知的渲染器文件
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可以正常工作並發送通知。
回答我自己的問題,要使事情正常進行,只需將代碼放在這樣的angularjs Controller函數中
function appCtrl() {
var vm = this;
const button = document.getElementById('button');
button.addEventListener('click', evt => {
new Notification('Angular Material FTW!');
});
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.