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 相关文章推荐
JSON 数字排序多字段排序介绍
Sep 18 Javascript
jquery自动填充勾选框即把勾选框打上true
Mar 24 Javascript
详解Javacript和AngularJS中的Promises
Feb 09 Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
Jul 07 Javascript
js无法获取到html标签的属性的解决方法
Jul 26 Javascript
使用JavaScript实现alert的实例代码
Jul 06 Javascript
基于 Bootstrap Datetimepicker 联动
Aug 03 Javascript
vue中for循环更改数据的实例代码(数据变化但页面数据未变)
Sep 15 Javascript
简单谈谈CommonsChunkPlugin抽取公共模块
Dec 31 Javascript
vue中使用cropperjs的方法
Mar 01 Javascript
vue实现未登录跳转到登录页面的方法
Jul 17 Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
Oct 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
关于Sphinx创建全文检索的索引介绍
2013/06/25 PHP
PHP实现今天是星期几的几种写法
2013/09/26 PHP
php中http与https跨域共享session的解决方法
2014/12/20 PHP
php基于表单密码验证与HTTP验证用法实例
2015/01/06 PHP
php上传大文件失败的原因及应对策略
2015/10/20 PHP
Win10 下安装配置IIS + MySQL + nginx + php7.1.7
2017/08/04 PHP
不用写JS也能使用EXTJS视频演示
2008/12/29 Javascript
ExtJs Excel导出并下载IIS服务器端遇到的问题
2011/09/16 Javascript
JavaScript初学者应注意的七个细节详细介绍
2012/12/27 Javascript
event.currentTarget与event.target的区别介绍
2012/12/31 Javascript
JS保存、读取、换行、转Json报错处理方法
2013/06/14 Javascript
关于Javascript与iframe的那些事儿
2013/07/04 Javascript
JavaScript制作简易计算器(不用eval)
2017/02/05 Javascript
js与jQuery实现获取table中的数据并拼成json字符串操作示例
2018/07/12 jQuery
layui实现点击按钮给table添加一行
2018/08/10 Javascript
vue实现路由切换改变title功能
2019/05/28 Javascript
vue父子组件的通信方法(实例详解)
2019/11/10 Javascript
[01:14:34]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第一局
2016/02/28 DOTA
Python的垃圾回收机制深入分析
2014/07/16 Python
跟老齐学Python之做一个小游戏
2014/09/28 Python
Python中用函数作为返回值和实现闭包的教程
2015/04/27 Python
Python多进程同步简单实现代码
2016/04/27 Python
用生成器来改写直接返回列表的函数方法
2017/05/25 Python
pyinstaller还原python代码过程图解
2020/01/08 Python
pytorch 使用加载训练好的模型做inference
2020/02/20 Python
Python 实现一行输入多个数字(用空格隔开)
2020/04/29 Python
python中yield的用法详解
2021/01/13 Python
美国杂志订阅折扣与优惠网站:Magazines.com
2016/08/31 全球购物
总经理秘书的岗位职责
2013/12/27 职场文书
医院保洁服务方案
2014/06/11 职场文书
安全生产目标管理责任书
2014/07/25 职场文书
大学生考试作弊检讨书
2014/09/21 职场文书
硕士论文致谢范文
2015/05/14 职场文书
Mysql中 unique列插入重复值该怎么解决呢
2021/05/26 MySQL
python内置模块之上下文管理contextlib
2022/06/14 Python
彻底卸载VMware虚拟机的超详细步骤记录
2022/07/15 Servers