AngualrJS中的Directive制作一个菜单


Posted in Javascript onJanuary 26, 2016

说下我经常写菜单的方式:

<ul>
<li data-ng-class="{'active': highlight('/orders')}">
<a href="#/orders">Orders</a>
</li>
</ul>

菜单项是否高亮显示取决于controller中的highlight方法。

vm.highlight = funciton(path){
return $locaiton.path().substr(0, path.lenght) === path;
}

如果以Directive的方式会更简洁。

<ul menu-highlighter highlight-class-name="active">
<li><a href="#/customers">Customers</a></li>
<li><a href="#/orders">Customers</a></li>
<li><a href="#/about">Customers</a></li>
</ul>

Directive大致是:

(function(){
var injectParams = ['$location'];
var menuHighlighter = function($location){
var link = function(scope, element){
function setActive(){
var path = $location.path();
var className = scope.highlightClassName || 'active';
if(path){
angular.forEac(element.find('li'), function(li){
//<a href="#/customers">Customers</a>
var anchor = li.querySelector('a');
//#/customers
var href=(anchor && anchor.href) ? anchor.href : anchor.getAttribute('data-href').replace('#','');
//customers
var trimmedHref = href.substr(href.indexOf('#/')+1, href.length);
var basePath = path.substr(0, trimmedHref.length);
if(trimmedHref === basePath){
angular.element(li).addClass(className);
} else {
angular.element(li).removeClass(className);
}
});
} 
}
setActive();
scope.$on('$locationChangeSuccess', setActive);
};
return {
restrict: 'A',
scope: {
highlightClassName: '@'
},
link: link
}
};
menuHighlighter.$inject = injectParams;
angular.module('my.directives')
.directive('menuHighlighter', menuHighlighter);
}());

以上内容是针对AngualrJS中的Directive制作一个菜单的相关知识,希望对大家有所帮助。

Javascript 相关文章推荐
Whatever:hover 无需javascript让IE支持丰富伪类
Jun 29 Javascript
在JavaScript并非所有的一切都是对象
Apr 11 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
Aug 12 Javascript
js表格排序实例分析(支持int,float,date,string四种数据类型)
May 06 Javascript
JavaScript中Date.toSource()方法的使用教程
Jun 12 Javascript
JavaScript代码实现图片循环滚动效果
Mar 19 Javascript
JSONP跨域请求实例详解
Jul 04 Javascript
Javascript 判断两个IP是否在同一网段实例代码
Nov 28 Javascript
npm 更改默认全局路径以及国内镜像的方法
May 16 Javascript
React styled-components设置组件属性的方法
Aug 07 Javascript
layer更改皮肤的实现方法
Sep 11 Javascript
Vue插件之滑动验证码
Sep 21 Javascript
js实现网页图片延时加载 提升网页打开速度
Jan 26 #Javascript
详解javascript new的运行机制
Jan 26 #Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
Jan 26 #Javascript
基于JavaScript实现瀑布流布局(二)
Jan 26 #Javascript
AngualrJS中每次$http请求时的一个遮罩层Directive
Jan 26 #Javascript
JavaScript html5 canvas画布中删除一个块区域的方法
Jan 26 #Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
Jan 26 #Javascript
You might like
深入PHP FTP类的详解
2013/06/13 PHP
开启PHP Static 关键字之旅模式
2015/11/13 PHP
innerHTML 和 getElementsByName 在IE下面的bug 的解决
2010/04/09 Javascript
javascript基础第一章 JavaScript与用户端
2010/07/22 Javascript
Jquery中显示隐藏的实现代码分析
2011/07/26 Javascript
jQuery1.6 类型判断实现代码
2011/09/01 Javascript
jquery实现的树形目录实例
2015/06/26 Javascript
javascript解析xml实现省市县三级联动的方法
2015/07/25 Javascript
javascript判断复选框是否选中的方法
2015/10/16 Javascript
jQuery实现鼠标选中文字后弹出提示窗口效果【附demo源码】
2016/09/05 Javascript
JS验证图片格式和大小并预览的简单实例
2016/10/11 Javascript
用JavaScript实现让浏览器停止载入页面的方法
2017/01/19 Javascript
深入理解angular2启动项目步骤
2017/07/15 Javascript
bootstrap select下拉搜索插件使用方法详解
2017/11/23 Javascript
vue-router中scrollBehavior的巧妙用法
2018/07/09 Javascript
React中使用UEditor百度富文本的方法
2018/08/22 Javascript
详解Vue中的自定义指令
2020/12/07 Vue.js
[49:08]FNATIC vs Infamous 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python urllib模块urlopen()与urlretrieve()详解
2013/11/01 Python
python模块导入的方法
2019/10/24 Python
Python TestSuite生成测试报告过程解析
2020/07/23 Python
python里反向传播算法详解
2020/11/22 Python
Python截图并保存的具体实例
2021/01/14 Python
购买原创艺术品:Zatista
2019/11/09 全球购物
德国家具折扣店:POCO
2020/02/28 全球购物
意大利单身交友网站:Meetic
2020/07/12 全球购物
大专自我鉴定范文
2013/10/01 职场文书
空乘英文求职信
2014/04/13 职场文书
企业法人代表任命书
2014/06/06 职场文书
代领毕业证委托书
2014/08/02 职场文书
房产协议书范本2014
2014/09/30 职场文书
九九重阳节标语
2014/10/07 职场文书
党员三严三实心得体会
2014/10/13 职场文书
2015年学校工作总结范文
2015/04/20 职场文书
2015年卫生院健康教育工作总结
2015/07/24 职场文书
python正则表达式re.search()的基本使用教程
2021/05/21 Python