当我们使用angularjs的路由时，时常会出现一个需求，当选中菜单时把当前菜单的样式设置为选中状态(多数就是改变颜色)



接下来就看看Angular-UI-Router里的指令ui-sref-active 的使用

其意思就是查看当前激活状态并设置 Class

代码：

<!DOCTYPE html>

<html ng-app="app">

<head>

<title>嵌套视图</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

<meta http-equiv="description" content="this is my page">

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<link rel="stylesheet"

	href="../../plugins/bootstrap/css/bootstrap.min.css" type="text/css"></link>

<style type="text/css">

.active1 {

	background-color: green!important;

}

</style>

</head>

<body>

	<div class="container">

		<nav class="navbar navbar-default" role="navigation">

			<div class="container-fluid">

				<div class="navbar-header">

					<ul class="nav navbar-nav">

						<li ui-sref-active="active1" class=""><a class="navbar-brand" ui-sref="index1"

							>index1</a>

						</li>

						<li ui-sref-active="active1"><a class="navbar-brand" ui-sref="index2"

							>index2</a>

						</li>

						<li ui-sref-active="active1"><a class="navbar-brand" ui-sref="index3"

							>index3</a>

						</li>

					</ul>

				</div>

			</div>

		</nav>

	</div>

	<div ui-view></div>

</body>

<script type="text/javascript"

	src="../../plugins/angular/angular.min-1.4.6.js"></script>

<script type="text/javascript"

	src="../../plugins/angular/angular-ui-router-0.2.10.js"></script>

<script type="text/javascript">

	var app = angular.module("app", [ 'ui.router' ]);

	app.config(

			[ '$stateProvider', '$urlRouterProvider',

					function($stateProvider, $urlRouterProvider) {

						$stateProvider.state('index2', {

							url : '/index2',

							templateUrl : '/Angular/uiview/nested/index2.html'

						}).state('index1', {

							url : '/index1',

							templateUrl : '/Angular/uiview/nested/index1.html'

						}).state('index3', {

							url : '/index3',

							templateUrl : '/Angular/uiview/nested/index3.html'

						});

						$urlRouterProvider.otherwise('/index2');

					} ]).config(function($sceProvider) {

		$sceProvider.enabled(false);

	});

	app.controller("view1_controller", function($stateParams) {

		alert($stateParams.param)

	})

</script>

</html>

当我们点击index3跳转到index3页面时，菜单为选中状态。实际上是设置了ui-sref-active="active1"当选中后当前li标签的class被设置为active1，就是自己定义的actice1的样式



[置顶] AngularJS实战之路由ui-sref-active使用的更多相关文章

  1. AngularJS实战之路由ui-view传参

    angular路由传参 首页 <!DOCTYPE html> <html ng-app="app"> <head> <title>路 ...

  2. AngularJS实战之路由ui-view

    1. 路由(ui-router) 1.1. 环境 1) angular.min.js 2) angular-ui-router-0.2.10.js 3) 确保确保包含ui.router为模块依赖关系. ...

  3. 算法代码[置顶] 机器学习实战之KNN算法详解

    改章节笔者在深圳喝咖啡的时候突然想到的...之前就有想写几篇关于算法代码的文章,所以回家到以后就奋笔疾书的写出来发表了 前一段时间介绍了Kmeans聚类,而KNN这个算法刚好是聚类以后经常使用的匹配技 ...

  4. [置顶] 【IOS】IOS7 UI适配

    昨天下了把手机升级成了IOS7 正式版,然后下了最新的xocde5.  试着编译了一下刚刚完成的几个应用,还好问题不大,半个小时的时间都适配好了,然后改了下几个新出现的warning.过几天等空了,要 ...

  5. [置顶] JQuery实战总结三 标签页效果图实现

    在浏览网站时我们会看到当我们鼠标移到多个选项卡上时,不同的选项卡会出现自己对应的界面的要求,在同一个界面上表达了尽量多的信息.大大额提高了空间的利用率.界面的切换效果也是不错的哦,这次自己可以实现啦. ...

  6. AngularJS实战之Controller之间的通信

    我们时常会在不同controller之间进行通信,接下来就介绍三种controller之间的通信方式 一.使用$on.$emit和$broadcast进行controller通信 虽然AngularJ ...

  7. AngularJS ui-router (嵌套路由)

    http://www.oschina.net/translate/angularjs-ui-router-nested-routes AngularJS ui-router (嵌套路由) 英文原文:A ...

  8. [转]AngularJS ui-router (嵌套路由)

    本文转自:http://www.oschina.net/translate/angularjs-ui-router-nested-routes http://www.codeproject.com/A ...

  9. 《AngularJs实战》学习笔记(慕课网)

    1. Controller使用过程中的注意点 不要试图去复用Controller, 一个控制器一般只负责一小块视图 不要在Controller中操作DOM, 这不是控制器的职责. 封装在指令里. 不要 ...

随机推荐

  1. python脚本删除文件与目录的命令

    1. 删除文件的命令 import os os.remove(file) os.unlink(file) 2.删除目录的命令 import shutil shutil.rmtree(directory ...

  2. DMZ原理与应用

    DMZ是英文“demilitarized zone”的缩写,中文名称为“隔离区”,“非军事化区”.它是为了解决安装防火墙后外部网络不能访问内部网络服务器的问题,而设立的一个非安全系统与安全系统之间的缓 ...

  3. 用js写已知abc+cba = 1333，其中a、b、c均为一位数，编程求出满足条件的a、b、c所有组合。

    <!--<script type="text/javascript"> //已知abc+cba = 1333,其中a.b.c均为一位数,编程求出满足条件的a.b. ...

  4. mysql 主从数据不一致 Slave_SQL_Running: No 解决方法

    在slave服务器上通过如下命令 mysql> show slave status\G; 显示如下情况: Slave_IO_Running: Yes Slave_SQL_Running: No ...

  5. input 原生上传文件（type = file）

    1.表单上传文件的步骤: - 1)设置enctype 默认为:enctype="application/x-www-form-urlencoded"(一般不设置) 若要表单中有需要 ...

  6. 进程 day36

    python之路——进程   阅读目录 理论知识 操作系统背景知识 什么是进程 进程调度 进程的并发与并行 同步\异步\阻塞\非阻塞 进程的创建与结束 在python程序中的进程操作 multipro ...

  7. Java中关键字static的使用

    static 关键字 1).static只能修饰成员变量或成员方法,所有非静态是对象相关的,所有静态是类相关的. 2)被static修饰的成员变量成员方法独立于该类的任何对象,它不依赖类的特定的实例, ...

  8. 20172306 《Java程序设计与数据结构》第七周学习总结

    20172306<Java程序设计>第七周学习总结 教材学习内容总结 这一章的标题是继承.主要学习了有关继承的相关知识.其中在这五节中,我学到了以下几点: 1.继承主要表达的是" ...

  9. 02. pt-archiver

    pt-archiver \--source h=192.168.100.101,P=3306,u=admin,p='admin',D=db01,t=t01 \--dest h=192.168.100. ...

  10. mcu 通信数据解析

    串口发送一帧数据时,两个字节的间隔时间是多少? 波特率:发送二进制数据位的速率,习惯上用 baud 表示,即我们发送一位二进制数据的持续时间=1/baud. 如果波特率为9600,发送一个位需要的时间 ...