【问题标题】:Change AngularJS state on menu click in an Electron app在电子应用程序中单击菜单更改 AngularJS 状态
【发布时间】:2016-01-06 09:03:18
【问题描述】:

我正在尝试使用带有菜单项的 AngularJS 制作一个 Electron 应用程序。我可以像这样在主 Electron javascript 文件中定义这个菜单项:

var Menu = require('menu');
var menu = new Menu();
var tpl = [
        {
            label: 'Actions',
            submenu: [
                {
                    label: 'Xxxx',
                    click: function() { /* I want to change the state here */ }
                }
            ]
        }

    ];
menu = Menu.buildFromTemplate( tpl );
Menu.setApplicationMenu(menu);

但我不知道当用户点击子菜单时如何改变 AngularJS 的状态(我使用的是 ui-router)。

我还尝试根据应用程序中的控制器(或状态)更改菜单项。我知道我不能在 Angular 代码中执行 require('menu') ,所以如何更改控制器中的菜单项?

谢谢

【问题讨论】:

    标签: angularjs electron


    【解决方案1】:

    我要回答我自己的问题,我已经找到了解决方案。

    使用remote 模块,我可以将Web 进程与主进程通信并调用主进程对象的方法。所以,在 AngularJS 应用程序的主控制器中,我可以这样做:

    .controller('AppController', function ($scope, $rootScope, $state,  $http, $location) {
        $rootScope.remote = require('remote');
    
        var Menu = $rootScope.remote.require('menu');
        var App = $rootScope.remote.require('app');
    
        var menu = new Menu();
        var tpl = [
            {
                label: 'Actions',
                submenu: [
                    {
                        label: 'GoPage',
                        click: function() {
    
                            $state.go('samepage');
    
                        }
                    },
                    {
                        label: 'Quit',
                        click: function() { App.quit(); },
                        accelerator: 'Command+Q'
                    }
                ]
            }
    
        ];
        menu = Menu.buildFromTemplate( tpl );
        Menu.setApplicationMenu(menu);
    
    })
    

    通过这种方式,我可以在单击菜单项时调用 AngularJS 函数,并根据应用程序中的控制器更改菜单项。

    【讨论】:

    • 有什么理由必须将它附加到 $rootScope 吗?
    • 唯一的原因是在我需要使用远程变量时在所有控制器之间共享它。您可以改用本地变量。
    猜你喜欢
    • 2019-03-21
    • 2016-06-02
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-12-09
    • 2016-10-17
    • 1970-01-01
    • 2014-05-11
    相关资源
    最近更新 更多