AngualrJS中制作一个有关菜单的Directive
通常我们这样写一个菜单:
<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的更多相关文章
- eclipse 中main()函数中的String[] args如何使用?通过String[] args验证账号密码的登录类?静态的主方法怎样才能调用非static的方法——通过生成对象?在类中制作一个方法——能够修改对象的属性值?
eclipse 中main()函数中的String[] args如何使用? 右击你的项目,选择run as中选择 run configuration,选择arguments总的program argu ...
- Unity 游戏开发技巧集锦之制作一个望远镜与查看器摄像机
Unity 游戏开发技巧集锦之制作一个望远镜与查看器摄像机 Unity中制作一个望远镜 本节制作的望远镜,在鼠标左键按下时,看到的视图会变大:当不再按下的时候,会慢慢缩小成原来的视图.游戏中时常出现的 ...
- AngualrJS中每次$http请求时的一个遮罩层Directive
在AngualrJS中使用$http每次向远程API发送请求,等待响应,这中间有些许的等待过程.如何优雅地处理这个等待过程呢? 如果我们在等待过程中弹出一个遮罩层,会是一个比较优雅的做法. 这就涉及到 ...
- 编写Java程序,使用菜单组件制作一个记事本编辑器
返回本章节 返回作业目录 需求说明: 使用菜单组件制作一个记事本编辑器 实现思路: 创建记事本菜单工具栏JMenuBar. 创建多个菜单条JMenu. 创建多个菜单项JMenuItem. 将菜单添加至 ...
- Swift 中使用 SwiftyJSON 制作一个比特币价格 APP
Swift 中处理 JSON 数据有很多种方式,可以使用原生的 NSJSONSerialization,也可以使用很多第三方库.原生的 NSJSONSerialization 方式这篇文章中介绍过.这 ...
- [3]尝试用Unity3d制作一个王者荣耀(持续更新)->选择英雄-(中)
如果已经看过本章节:目录传送门:这是目录鸭~ 上节内容写了Actor管理器,那么这一节让我们先创建一个角色.(此章节开始加速...) 1.制作角色展示AssetBundle: 提取农药某个展示模型(S ...
- 使用 history 对象和 location 对象中的属性和方法制作一个简易的网页浏览工具
查看本章节 查看作业目录 需求说明: 使用 history 对象和 location 对象中的属性和方法制作一个简易的网页浏览工具 实现思路: 使用history对象中的 forward() 方法和 ...
- 用Phaser来制作一个html5游戏——flappy bird (二)
在上一篇教程中我们完成了boot.preload.menu这三个state的制作,下面我们就要进入本游戏最核心的一个state的制作了.play这个state的代码比较多,我不会一一进行说明,只会把一 ...
- 用Phaser来制作一个html5游戏——flappy bird (一)
Phaser是一个简单易用且功能强大的html5游戏框架,利用它可以很轻松的开发出一个html5游戏.在这篇文章中我就教大家如何用Phaser来制作一个前段时间很火爆的游戏:Flappy Bird,希 ...
随机推荐
- OCM_第二十天课程:Section9 —》Data Guard _ DATA GUARD 搭建/DATA GUARD 管理
注:本文为原著(其内容来自 腾科教育培训课堂).阅读本文注意事项如下: 1:所有文章的转载请标注本文出处. 2:本文非本人不得用于商业用途.违者将承当相应法律责任. 3:该系列文章目录列表: 一:&l ...
- HTML标签播放MP4视频
1.使用 <object> 标签播放视频 <object width="500" height="300" data="http:/ ...
- LeetCode(27): 移除元素
Easy! 题目描述: 给定一个数组 nums 和一个值 val,你需要原地移除所有数值等于 val 的元素,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数组并在使用 O(1 ...
- Java中的钩子方法
钩子方法是啥 钩子顾名思义就是用来挂东西的.那么要挂东西必须有个被挂的东西,要不就是铁环.要不就是墙的边沿.所以要能挂住东西必须要有个被勾住的铁环,要一个钩子.那么在java中也是同样的原理,你首先需 ...
- PHP将数据写入指定文件中
首先创建一个空的txt文件,这里我们创建了一个1.txt的空文件. 第一种方法:fwrite函数 <?php $file=fopen('1.txt','rb+'); var_dump(fwrit ...
- hdu1890 splay维护区间翻转
这题的建模有点不太一样,是按结点横坐标赋予键值的 同时每次rotate和splay时都要注意下往上往下更新 /* 先建立好splay tree,将结点按num/输入顺序排序,遍历时每次将当前结点提到根 ...
- Java获取当前时间的年月日方法
package com.ob; import java.text.ParseException; import java.text.SimpleDateFormat; import java.util ...
- 2018年商业版idea破解安装介绍
1. IntelliJ IDEA 2018商业版-安装 首先去官网http://www.jetbrains.com/idea/download/#section=windows下载Ultimate版( ...
- 021 RDD的依赖关系,以及造成的stage的划分
一:RDD的依赖关系 1.在代码中观察 val data = Array(1, 2, 3, 4, 5) val distData = sc.parallelize(data) val resultRD ...
- (转)Java按指定行数读取文件
package test import java.io.File; import java.io.FileReader; import java.io.IOException; import java ...