AngularJs MMenu指令 [英] AngularJs MMenu Directive
本文介绍了AngularJs MMenu指令的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我要创建我的角度应用一个mmenu指令。我为现在做到了这一点。还使用链接：功能（）{} 在指令
jQuery插件网页： http://mmenu.frebsite.nl/
指令：
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; DIV＆GT;
＆LT;导航类=导航栏导航栏默认＆GT;
＆LT; DIV CLASS =集装箱液＆GT;
＆LT; DIV 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; DIV CLASS =容器＆GT;
＆LT; DIV CLASS =超大屏幕＆GT;
＆LT; H1＆GT;侧菜单示例＆LT; / H1＆GT;
＆所述p为H.;
＆LT;一类=BTN BTN-LG BTN-初级的href =http://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;
http://plnkr.co/edit/QuUEfj?p=$p$ PVIEW
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指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
