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 相关文章推荐
另类调用flash无须激活的方法
Dec 27 Javascript
jQuery学习笔记之控制页面实现代码
Feb 27 Javascript
jquery mobile动态添加元素之后不能正确渲染解决方法说明
Mar 05 Javascript
原生javascript模仿win8等待提示圆圈进度条
Apr 24 Javascript
jquery中的常用事件bind、hover、toggle等示例介绍
Jul 21 Javascript
简介EasyUI datagrid editor combogrid搜索框的实现
Apr 01 Javascript
jQuery序列化表单成对象的简单实现
Nov 29 Javascript
详解JavaScript中this的指向问题
Jan 20 Javascript
详解webpack 配合babel 将es6转成es5 超简单实例
May 02 Javascript
微信小程序之蓝牙的链接
Sep 26 Javascript
vuex state及mapState的基础用法详解
Apr 19 Javascript
基于canvasJS在PHP中制作动态图表
May 30 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解决约瑟夫环示例
2014/04/09 PHP
Codeigniter+PHPExcel实现导出数据到Excel文件
2014/06/12 PHP
PHP中使用循环实现的金字塔图形
2014/11/08 PHP
PHP将session信息存储到数据库的类实例
2015/03/04 PHP
phpmailer绑定邮箱的实现方法
2016/12/01 PHP
音乐播放用的的几个函数
2006/09/07 Javascript
javascript 异常处理使用总结
2009/06/21 Javascript
基于jQuery试卷自动排版系统
2010/07/18 Javascript
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
2011/06/27 Javascript
javascript禁用Tab键脚本实例
2013/11/22 Javascript
jquery合并表格中相同文本的相邻单元格
2015/07/17 Javascript
JS通过Cookie判断页面是否为首次打开
2016/02/05 Javascript
jQuery操作属性和样式详解
2016/04/13 Javascript
AngularJS上拉加载问题解决方法
2016/05/23 Javascript
vue-resourse将json数据输出实例
2017/03/08 Javascript
react中使用css的7中方式(最全总结)
2019/02/11 Javascript
Vue.js特性Scoped Slots的浅析
2019/02/20 Javascript
python实现k均值算法示例(k均值聚类算法)
2014/03/16 Python
使用PDB模式调试Python程序介绍
2015/04/05 Python
使用Python编写爬虫的基本模块及框架使用指南
2016/01/20 Python
kaggle+mnist实现手写字体识别
2018/07/26 Python
python使用threading.Condition交替打印两个字符
2019/05/07 Python
python中hasattr()、getattr()、setattr()函数的使用
2019/08/16 Python
tensorflow mnist 数据加载实现并画图效果
2020/02/05 Python
Python使用graphviz画流程图过程解析
2020/03/31 Python
Python爬取梨视频的示例
2021/01/29 Python
CSS3 Notes: -webkit-box-reflect实现倒影的实例
2016/12/08 HTML / CSS
解释一下ArrayList Vector和LinkedList的实现和区别
2013/04/26 面试题
外企求职信范文分享
2013/12/31 职场文书
委托公证书范本
2014/04/03 职场文书
镇班子对照检查材料思想汇报
2014/09/24 职场文书
迁户口计划生育证明
2014/10/19 职场文书
员工加薪申请报告
2015/05/15 职场文书
2016教师给学生的毕业寄语
2015/12/04 职场文书
vue实现滑动解锁功能
2022/03/03 Vue.js
排查并解决MySQL生产库内存使用率高的报警
2022/04/11 MySQL