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制作一个菜单的相关知识，希望对大家有所帮助。

赞 (0)

相关推荐

  • AngularJS中的Directive自定义一个表格

    先给大家说下表格的需求: ● 表格结构 <table> <thead> <tr> <th>Name</th> <th>Street</th> <th>Age</th> </tr> </thead> <tbody> <tr> <td>></td> <td>></td> <td>>

  • JSP由浅入深(7)—— JSP Directives

    在前面的教程中,我们已经使用了java.util.Date.可以有人就会问:为什么不只使用import java.util.*呢?其实,在JSPs中也可以使用import语句,但是它的语法跟普通的Java是有些差别的.下面给出一个例子: <%@ page import="java.util.*" %> <HTML> <BODY> <% System.out.println( "Evaluating date now" );

  • AngualrJS中每次$http请求时的一个遮罩层Directive

    AngularJS是一款非常强大的前端MVC框架.在AngualrJS中使用$http每次向远程API发送请求,等待响应,这中间有些许的等待过程.如何优雅地处理这个等待过程呢? 如果我们在等待过程中弹出一个遮罩层,会是一个比较优雅的做法. 这就涉及到了对$http的请求响应进行拦截了.请求的时候,弹出一个遮罩层,收到响应的时候把遮罩层隐藏. 其实,$httpProvider已经为我们提供了一个$httpProvider.interceptors属性,我们只需要把自定义的拦截器放到该集合中就可以了

  • AngularJS directive返回对象属性详解

    写在前面:由于directive部分是angularjs中的重中之重,所以会分多篇章进行讲解.本章主要讲解directive返回对象中比较简单的属性 angularjs中使用.directive()来定义指令,该方法接收两个参数:name(指令的名字).factory_function(该函数定义指令的全部行为,返回一个对象) 栗子: //index.js angular.module('myApp',[]); myApp.directive('myDirective',function() {

  • AngularJS中的Directive实现延迟加载

    所谓的延迟加载通常是:直到用户交互时才加载.如何实现延迟加载呢? 需要搞清楚三个方面: 1.html元素的哪个属性需要延迟加载? 2.需要对数据源的哪个字段进行延迟加载? 3.通过什么事件来触发延迟加载? 自定义的Directive的页面表现大致是这样: <ul> <li ng-repeat="cust in customers" delay-bind="{{::cust.street}}" attribute="title"

  • AngularJS入门心得之directive和controller通信过程

    AngularJS入门心得之directive和controller通信过程

    AngularJS 通过新的属性和表达式扩展了 HTML.Angularjs学习起来也非常的简单. 1.AngularJS是何方神圣 Angular JS (Angular.JS) 是一组用来开发Web页面的框架.模板以及数据绑定和丰富UI组件.它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作. AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了.这里AngularJS就应运而生

  • 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.

  • python中的PywebIO模块制作一个数据大屏

    python中的PywebIO模块制作一个数据大屏

    目录 一.PywebIO介绍 二.PywebIO和Pyecharts的组合 三.PywebIO和Bokeh的组合 四.基于浏览器的GUI应用 一.PywebIO介绍 Python当中的PywebIO模块可以帮助开发者在不具备HTML和JavaScript的情况下也能够迅速构建Web应用或者是基于浏览器的GUI应用,PywebIO还可以和一些常用的可视化模块联用,制作成一个可视化大屏, 我们先来安装好需要用到的模块 pip install pywebio pip install cutechart

  • nodejs制作一个文档同步工具自动同步到gitee中的实现代码

    nodejs制作一个文档同步工具自动同步到gitee中的实现代码

    初衷 之所以要做这个工具是为了让自己可以随时用电脑时能记录日常工作或生活.一般只需要简单记录下就行了.这样我在家里的和公司里的记录都能同步看到. 这样后期整理的时候看到几个关键词就能想起来具体的事情,有的也可以为日后整理成文章做一个草稿,这样写文章才能有头有尾,否则想到什么说什么是非常不利于写出文章的. 一开始我使用手动同步的方式,但是发现很麻烦,之后就直接用了个批处理文件来一次性同步. git pull git add . git commit -m '同步' git push git sta

  • 如何在android中制作一个方向轮盘详解

    如何在android中制作一个方向轮盘详解

    目录 先上效果图 原理很简单,其实就是一个自定义的view 计算滑块位置的原理: 通用性很好的接口: 小技巧: 代码部分 写在最后: 先上效果图 原理很简单,其实就是一个自定义的view 通过观察,很容易发现,我们自己的轮盘就两个view需要绘制,一个是外面的圆盘,一个就随手指移动的滑块: 外面的圆盘很好绘制,内部的滑块则需要采集手指的位置,根据手指的位置计算出滑块在大圆内的位置: 最后,我们做的UI不是单纯做一个UI吧,肯定还是要用于实际应用中去,所以要加一个通用性很好的回调. 计算滑块位置的

  • Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发

    Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发

    在使用bootstrap制作后台时用到了响应式导航条,其中dropdown组件更是用的比较多,用的多需要点击的就多,dropdown默认鼠标左键单击才展开,如果使用鼠标放上去(hover)就展开则会省去点击时间,这样能提高效率. 原本的改造思路是:给dropdown元素绑定hover事件,hover上去的时候,执行该元素的click事件--即把hover同步为click,hover即为click. 但想到与其自己来改造,不如先在网上搜索搜索看看有没有现成的插件,果不其然就搜索到了,托管在gith

  • python制作一个简单的gui 数据库查询界面

    一.准备工作: 1.安装mysql3.7,创建一个test数据库,创建student表,创建列:(列名看代码),创建几条数据 (以上工作直接用navicat for mysql工具完成) 二.代码: import sys import tkinter as tk import mysql.connector as sql #--------------------查询函数--------------------------- def sql_connect(): listbox_show.del

  • 使用Python制作一个数据预处理小工具(多种操作一键完成)

    使用Python制作一个数据预处理小工具(多种操作一键完成)

    在我们平常使用Python进行数据处理与分析时,在import完一大堆库之后,就是对数据进行预览,查看数据是否出现了缺失值.重复值等异常情况,并进行处理. 本文将结合GUI工具PySimpleGUI,来讲解如何制作一款属于自己的数据预处理小工具,让这个过程也能够自动化!最终效果如下 本文将分为三部分讲解: 制作GUI界面 数据处理讲解 打包与测试 主要涉及将涉及以下模块: PySimpleGUI pandas matplotlib 一.GUI界面制作 思路 老规矩,先讲思路再上代码,首先还是说一

  • Unity 制作一个分数统计系统

    Unity 制作一个分数统计系统

    项目中经常遇到分数统计的需求,例如我们执行了某项操作或做了某个题目,操作正确则计分,相反则不计分失去该项分数,为了应对需求需要一个分数统计系统. 首先定义一个分数信息的数据结构,使用Serializable特性使其可序列化: using System; using UnityEngine; namespace SK.Framework { /// <summary> /// 分数信息 /// </summary> [Serializable] public class ScoreI

随机推荐