Question

在menus.client.service.js文件中，我试图理解MEAN.js框架中菜单的填充结构

代码以分配给此

的空菜单对象开始

this.menus = {}

然后在文件的底部，调用this.addMenu（＆＃39; topbar＆＃39;）函数

    // Add new menu object by menu id
    this.addMenu = function(menuId, isPublic, roles) {
        console.log('pre-this.menus') 
        console.log(this.menus) // empty object

        // Create the new menu
        this.menus[menuId] = {
            isPublic: isPublic || false,
            roles: roles || this.defaultRoles,
            items: [],
            shouldRender: shouldRender
        };
        console.log('post-this.menus')
        console.log(this.menus[menuId]) //complete populated menu with submenus i.e "List Articles", "New Article"

        // Return the menu object
        return this.menus[menuId];
    };

通过这一个函数，似乎有两个其他函数被称为

this.addMenuItem和this.addsubMenuItem

但我不知道它是如何发生的，因为我没有在文件中明确地看到它们。

我想我在这里错过了一个重要的概念。我还查看了header.client.controller.js文件，但它只是调用getMenu函数并分配给$ scope.menu

$scope.menu = Menus.getMenu('topbar');

这是完整的非功能性文件代码

jsfiddle：http://jsfiddle.net/4c5gc0aq/

Answer 1

menus.client.service.js只是在模块中注入的菜单服务＆＃39;跑块。

从模块配置中生成（填充）菜单项。例如，如果您查看articles.client.config.js，您将看到如何为每个模块填充菜单：

'use strict';

// Configuring the Articles module
angular.module('articles').run(['Menus',
    function(Menus) {
        // Add the articles dropdown item
        Menus.addMenuItem('topbar', {
            title: 'Articles',
            state: 'articles',
            type: 'dropdown'
        });

        // Add the dropdown list item
        Menus.addSubMenuItem('topbar', 'articles', {
            title: 'List Articles',
            state: 'articles.list'
        });

        // Add the dropdown create item
        Menus.addSubMenuItem('topbar', 'articles', {
            title: 'Create Articles',
            state: 'articles.create',
            roles: ['admin']
        });
    }
]);

我从0.4.0版本中得到了这个例子，但我确信它在早期版本中非常相似。

在menus.client.service.js的底部，您还可以为具有特定角色的用户（如管理员）定义更多菜单，例如侧边菜单或基于角色的菜单：

this.addMenu('top-admin', {
    isPublic: false,
    roles: ['admin']
});
this.addMenu('top-user', {
    isPublic: false,
    roles: ['user']
});

然后使用相应模块的配置（运行）块中的菜单项填充它们。例如：

// Add the articles dropdown item
Menus.addMenuItem('top-admin', {
    title: 'Articles',
    state: 'articles',
    type: 'dropdown'
});

// Add the dropdown list item
Menus.addSubMenuItem('top-admin', 'articles', {
    title: 'List Articles',
    state: 'articles.list'
});

MEAN.js菜单如何工作？

1 个答案: