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 相关文章推荐
js 纯数字不重复排列的另类方法
Jul 17 Javascript
20行代码实现的一个CSS覆盖率测试脚本
Jul 07 Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
Apr 12 Javascript
详细解密jsonp跨域请求
Apr 15 Javascript
基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏
Jan 07 Javascript
JS实现title标题栏文字不间断滚动显示效果
Sep 07 Javascript
Angular ng-class详解及实例代码
Sep 19 Javascript
Angular.Js的自动化测试详解
Dec 09 Javascript
js实现交通灯效果
Jan 13 Javascript
使用vue实现grid-layout功能实例代码
Jan 05 Javascript
JS使用cookie保存用户登录信息操作示例
May 30 Javascript
React生命周期原理与用法踩坑笔记
Apr 28 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 fsockopen中多线程问题的解决办法[翻译]
2011/11/09 PHP
for循环连续求和、九九乘法表代码
2012/02/20 PHP
php实现下载限制速度示例分享
2014/02/13 PHP
Js之软键盘实现(js源码)
2007/01/30 Javascript
Open and Print a Word Document
2007/06/15 Javascript
捕获浏览器关闭、刷新事件不同情况下的处理方法
2013/06/02 Javascript
js实现简单登录功能的实例代码
2013/11/09 Javascript
javascript实现炫酷的拖动分页
2015/05/11 Javascript
50 个 jQuery 插件可将你的网站带到另外一个高度
2016/04/26 Javascript
基于jquery实现智能表单验证操作
2016/05/09 Javascript
浅析js绑定事件的常用方法
2016/05/15 Javascript
JavaScript操作选择对象的简单实例
2016/05/16 Javascript
Angular.JS中的this指向详解
2017/05/17 Javascript
Angular中ng-options下拉数据默认值的设定方法
2017/06/21 Javascript
ndm:NPM的桌面GUI应用程序
2018/10/15 Javascript
JS中创建自定义类型的常用模式总结【工厂模式,构造函数模式,原型模式,动态原型模式等】
2019/01/19 Javascript
vue视图不更新情况详解
2019/05/16 Javascript
Json实现传值到后台代码实例
2020/06/30 Javascript
Vue多选列表组件深入详解
2021/03/02 Vue.js
在Windows8上的搭建Python和Django环境
2014/07/03 Python
浅谈pycharm的xmx和xms设置方法
2018/12/03 Python
Python3.5 Pandas模块缺失值处理和层次索引实例详解
2019/04/23 Python
python3 pygame实现接小球游戏
2019/05/14 Python
Python Django 添加首页尾页上一页下一页代码实例
2019/08/21 Python
python实现多进程按序号批量修改文件名的方法示例
2019/12/30 Python
PyQt5实现画布小程序
2020/05/30 Python
深入理解HTML的FormData对象
2016/05/17 HTML / CSS
canvas绘制视频封面的方法
2018/02/05 HTML / CSS
Vans(范斯)德国官网:美国南加州的原创极限运动潮牌
2017/05/02 全球购物
2014年公务员退休工资改革方案
2014/10/01 职场文书
思想作风整顿个人剖析材料
2014/10/06 职场文书
个人批评与自我批评总结
2014/10/17 职场文书
2015年度内部审计工作总结
2015/05/20 职场文书
导游词之襄阳古城
2019/09/27 职场文书
pytorch 使用半精度模型部署的操作
2021/05/24 Python
关于React Native 无法链接模拟器的问题
2021/06/21 Javascript