AngularJS的Material多层菜单

AngularJS的Material多层菜单
插件名称 angular-material-multilevel-menu
发布时间 2020年7月30日
插件作者 jmouriz

一个受 了 Material Design 启发 的Anguar.js的多级导航菜单。

安装:

# Yarn
$ yarn add angular-material-multilevel-menu

# NPM
$ npm angular-material-multilevel-menu –save

用法

在文档头中,包括:

<link rel="stylesheet" href="node_modules/angular-material-multilevel-menu/angular-material-multilevel-menu.min.css" />

在需要的地方使用md-multi-level-menu:

<md-multi-level-menu md-title="Menu"
                     md-back="Back"
                     md-style="replace">
</md-multi-level-menu>

然后,在贴身标签之前,包括:

<script src="node_modules/angular-material-multilevel-menu/angular-material-multilevel-menu.min.js"></script>

在您的应用程序中包含该模块:

var application = angular.module('Application', ['ngMdMultiLevelMenu']);

配置项目:

application.config(['menuProvider', function(menuProvider) {
   menuProvider.items([{
      label: 'Item 1',
      icon: 'amazon',
      items: [{
         label: 'Item 1.1',
         link: 'item-1-1',
         icon: 'apple'
      }, {
         label: 'Item 1.2',
         link: 'item-1-2',
         icon: 'facebook'
      }]
   }, {
      label: 'Item 2',
      link: 'item-2',
      icon: 'windows'
   }, {
      label: 'Item 3',
      icon: 'google-plus',
      items: [{
         label: 'Item 3.1',
         link: 'item-3-1',
         icon: 'twitter'
      }, {
         label: 'Item 3.2',
         icon: 'github-box',
         items: [{
            label: 'Item 3.2.1',
            link: 'item-3-2-1',
            icon: 'whatsapp'
         }, {
            label: 'Item 3.2.2',
            icon: 'office',
            items: [{
               label: 'Item 3.2.2.1',
               link: 'item-3-2-2-1',
               icon: 'hangouts'
            }]
         }]
      }]
   }, {
      label: 'Item 4',
      link: 'item-4',
      icon: 'linkedin'
      hidden: false
   }]);
}]);

最后,在您的控制器中,配置$ menu服务的select回调以处理链接:

application.controller('Controller', ['$menu', function($menu) {
   $menu.callback(function(item) {
      console.log('你将要', item.link);
   });
}]);