mmenu

mmenu

关注
发信
关注(28)粉丝(399)

AngularJs MMenu指令

本文介绍了AngularJs MMenu指令的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我要创建我的角度应用一个mmenu指令。我为现在做到了这一点。还使用链接：功能（）{} 在指令

jQuery插件网页：

指令：

  angular.module（'对myApp'）。指令（sideMenu'，函数（）{
     返回{
        限制：'E'，
        templateUrl：'脚本/谐音/侧menu.html
     };
}）;

部分（侧menu.html）：

 ＆LT; NAV n =菜单＆GT;
＆LT; UL＆GT;
    ＆LT;李＆GT;＆LT; A HREF =JavaScript的：无效（0）;＆GT;＆LT; I类=发FA-断电＆GT;＆LT; / I＆GT;注销＆LT; / A＆GT;＆LT; /李＆GT;
    ＆LT;立GT;＆LT; A HREF =JavaScript的：无效（0）;＆GT;＆LT; I类=发FA-COG＆GT;＆LT; / I＆GT;
            额外的链接＆LT; / A＆GT;
        ＆LT; UL＆GT;
            ＆LT;立GT;＆LT; A HREF =JavaScript的：无效（0）;＆GT;历史与LT; / A＆GT;＆LT; /李＆GT;
            ＆LT;立GT;＆LT; A HREF =JavaScript的：无效（0）;＆gt;该团队＆LT; / A＆GT;
                ＆LT; UL＆GT;
                    ＆LT;立GT;＆LT; A HREF =JavaScript的：无效（0）;＆GT;管理与LT; / A＆GT;＆LT; /李＆GT;
                    ＆LT;立GT;＆LT; A HREF =JavaScript的：无效（0）;＆GT;发展与LT; / A＆GT;＆LT; /李＆GT;
                ＆LT; / UL＆GT;＆LT; /李＆GT;
        ＆LT; / UL＆GT;＆LT; /李＆GT;
＆LT; / UL＆GT;

这样写的jQuery部分局部本身：

  $（函数（）{
    $（'＃导航菜单'）。mmenu（{
       扩展：['效应滑动菜单，边境满]
       offCanvas：{
          位置：右
       }，
       导航栏：{
            标题：'＆下; IMG SRC =IMG / logo.png/＆GT;'
       }，
       navbars：
        {
            位置：'底'，
            内容：
                '＆LT; A HREF =JavaScript的：无效（0）;＆GT;＆LT; I类=发FA-脸谱＆GT;＆LT; / I＆GT;＆LT; / A＆GT;，
                '＆LT; A HREF =JavaScript的：无效（0）;＆GT;＆LT; I类=发发，谷歌加＆GT;＆LT; / I＆GT;＆LT; / A＆GT;，
                '＆LT; A HREF =JavaScript的：无效（0）;＆GT;＆LT; I类=发FA-微博＆GT;＆LT; I＆GT /;＆LT; / A＆GT;'
            ]
        }
      ]
   }）;
 }）;


解决方案

下面是一个例子，你如何使用mmenu在角应用：

app.js：

  VAR应用= angular.module（'plunker'，[]）;app.directive（'mmenu'，函数（）{
    返回{
        限制：'A'，
        链接：功能（范围，元素，ATTRS）{
            $（元件）.mmenu（{}）;
        }
    };
}）;

index.html的：

 ＆LT;！ - 引导导航栏+主要内容 - ＆GT;
  ＆LT; D​​IV＆GT;
    ＆LT;导航类=导航栏导航栏默认＆GT;
      ＆LT; D​​IV CLASS =集装箱液＆GT;
        ＆LT; D​​IV CLASS =导航栏头＆GT;
          ＆LT;一类=导航栏品牌的href =＃菜单＆GT;＆LT; B＆GT;＆LT;跨度类=glyphicon glyphicon菜单 - 汉堡ARIA隐藏=真＆GT;＆LT; / SPAN＆GT;＆LT ; / b＆GT;＆LT; / A＆GT;
          ＆LT;一类=导航栏品牌的href =＃将实施例＆LT; / A＆GT;
        ＆LT; / DIV＆GT;
      ＆LT; / DIV＆GT;
    ＆LT; / NAV＆GT;    ＆LT; D​​IV CLASS =容器＆GT;
      ＆LT; D​​IV CLASS =超大屏幕＆GT;
        ＆LT; H1＆GT;侧菜单示例＆LT; / H1＆GT;
        ＆所述p为H.;
          ＆LT;一类=BTN BTN-LG BTN-初级的href =htt​​p://mmenu.frebsite.nl/目标=_空白角色=按钮＆GT; mmenu主页＆LT; / A＆GT;
        ＆所述; / P＆GT;
      ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
  ＆LT; / DIV＆GT;  ＆LT;！ - 侧面菜单 - ＆GT;
  ＆LT; NAV n =菜单mmenu＆GT;
     ＆LT; UL＆GT;
        ＆LT;立GT;＆LT; A HREF =/＆GT;家庭和LT; / A＆GT;＆LT; /李＆GT;
        ＆LT;立GT;＆LT; A HREF =/关于＆gt;关于美国和LT; / A＆GT;
           ＆LT; UL＆GT;
              ＆LT;立GT;＆LT; A HREF =/约/历史＆GT;历史与LT; / A＆GT;＆LT; /李＆GT;
              ＆LT;立GT;＆LT; A HREF =/约/团队＆gt;该团队＆LT; / A＆GT;＆LT; /李＆GT;
              ＆LT;立GT;＆LT; A HREF =/约/地址＆GT;我们的地址＆LT; / A＆GT;＆LT; /李＆GT;
           ＆LT; / UL＆GT;
        ＆LT; /李＆GT;
        ＆LT;立GT;＆LT; A HREF =/接触＆GT;联系与LT; / A＆GT;＆LT; /李＆GT;
     ＆LT; / UL＆GT;
  ＆LT; / NAV＆GT;

I want to create a mmenu directive for my angular app. I have done this for now. Also used link: function(){} in directive.

jQuery Plugin Webpage : http://mmenu.frebsite.nl/

Directive:

angular.module('myApp').directive('sideMenu', function() {
     return {
        restrict : 'E',
        templateUrl : 'scripts/partials/side-menu.html'
     };
});

Partial (side-menu.html):

<nav id="menu">
<ul>
    <li><a href="javascript:void(0);"><i class="fa fa-power-off"></i> Logout</a></li>
    <li><a href="javascript:void(0);"><i class="fa fa-cog"></i>
            Extra Link</a>
        <ul>
            <li><a href="javascript:void(0);">History</a></li>
            <li><a href="javascript:void(0);">The team</a>
                <ul>
                    <li><a href="javascript:void(0);">Management</a></li>
                    <li><a href="javascript:void(0);">Development</a></li>
                </ul></li>
        </ul></li>
</ul>

Written this jQuery part in partial itself:

$(function() {
    $('nav#menu').mmenu({
       extensions   : [ 'effect-slide-menu', "border-full" ],
       offCanvas: {
          position: "right"
       },
       navbar       : {
            title   : '<img src="img/logo.png"/>'
       },
       navbars      : [
        {
            position    : 'bottom',
            content     : [
                '<a href="javascript:void(0);"><i class="fa fa-facebook"></i></a>',
                '<a href="javascript:void(0);"><i class="fa fa-google-plus"></i></a>',
                '<a href="javascript:void(0);"><i class="fa fa-twitter"></i></a>'
            ]
        }
      ]
   });
 });
解决方案

here is an example how you can use mmenu in an angular app:

app.js:

var app = angular.module('plunker', []);

app.directive('mmenu', function() {
    return {
        restrict : 'A',
        link : function(scope, element, attrs) {
            $(element).mmenu({});
        }
    };
});

index.html:

  <!-- Bootstrap Navbar + Main Content -->
  <div>
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="#menu"><b><span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span></b></a>
          <a class="navbar-brand" href="#">EXAMPLE</a>
        </div>
      </div>
    </nav>

    <div class="container">
      <div class="jumbotron">
        <h1>Side Menu Example</h1>
        <p>
          <a class="btn btn-lg btn-primary" href="http://mmenu.frebsite.nl/" target="_blank" role="button">mmenu homepage</a>
        </p>
      </div>
    </div>
  </div>

  <!-- Side Menu -->
  <nav id="menu" mmenu>
     <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About us</a>
           <ul>
              <li><a href="/about/history">History</a></li>
              <li><a href="/about/team">The team</a></li>
              <li><a href="/about/address">Our address</a></li>
           </ul>
        </li>
        <li><a href="/contact">Contact</a></li>
     </ul>
  </nav>

http://plnkr.co/edit/QuUEfj?p=preview

这篇关于AngularJs MMenu指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

10-12 09:25
Powered by LMLPHP ©2024 mmenu 0.002516