Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change AngularJS state on menu click in an Electron app

I'm trying to make an Electron app using AngularJS with menu items. I can define this menu items in the main Electron javascript file like this:

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

But I don't know how change the state (I'm using ui-router) of AngularJS when the user click on the submenu.

Also i'm trying to change the menuitems depending the controller (or state) within the application. I know I can't do a require('menu') inside the Angular code so, how can I change the menu items in a controller?

Thanks

like image 247
Carlos Mayo Avatar asked Oct 08 '15 16:10

Carlos Mayo


1 Answers

I'm going to answer my own question, I have found the solution.

With the remote module I can communicate the web process with the main process and call methods of the main process object. So, in the main controller of the AngularJS app I can do:

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

})

By this way I can call AngularJS functions on menu items clicks and change menu items depending the controller within the application.

like image 65
Carlos Mayo Avatar answered Sep 30 '22 06:09

Carlos Mayo