当我们使用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. C#中委托

    委托是一种安全地封装方法的类型,它与 C 和 C++ 中的函数指针类似.与 C 中的函数指针不同,委托是面向对象的.类型安全的和保险的.一个委托类型是代表与特定参数列表和返回类型的方法的引用类型.实例 ...

  2. mysql中各种join连表查询总结

    通常我们需要连接多个表查询数据,以获取想要的结果. 一.连接可以分为三类: (1) 内连接:join,inner join (2) 外连接:left join,left outer join,righ ...

  3. centos7下docker1.12.5学习笔记

    一.Docker简介 Docker是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的Linux机器上,也可以实现虚拟化.容器是完全使用沙箱机制,相 ...

  4. 自动发现项目中的所有URL

    我的rbac组件,是想用到任何一个,项目中的. so 问题来了. - 问题: 拿到一个项目. 怎样获取到,当前项目中, 所有的URL 以及 每个URL的别名name, 还有是有 namespace 命 ...

  5. Oracle_PL/SQL(10) 定时器job

    定时器job1.定义 定时器指在特定的时间执行特定的操作. 可以多次执行.说明:特定的操作:指一个完成特定功能的存储过程.多次执行:指可以每分钟.每小时.每天.每周.每月.每季度.每年等周期性的运行. ...

  6. hdu 1541 (基本树状数组) Stars

    题目http://acm.hdu.edu.cn/showproblem.php?pid=1541 n个星星的坐标,问在某个点左边(横坐标和纵坐标不大于该点)的点的个数有多少个,输出n行,每行有一个数字 ...

  7. JVM 类加载器 （二）

    1.类加载器(ClassLoader)负责加载class文件,class文件在文件开头有特定的文件标识,并且ClassLoader只负责 class 文件的加载,至于class文件是否能够运行则由Ex ...

  8. NC 日志文件注册

    在实际开发中,例如接口向外系统发送数据,这些数据前台看不到,一般都是记录日志,然后在后台日志文件中查看.但是,用系统原本日志文件来看,有时会记录一些别的模块日志信息.所以,我们可以注册个自己的模块日志 ...

  9. [Jmeter] 将参数从Jenkins传递给Jmeter

    Configuration in Jmeter Configuration in Jenkins

  10. 商业化博客平台原型制作分享-TypePad

    TypePad是商业化博客平台,提供完全付费的博客服务,通过TypePad用户可以很容易建立自己的博客,TypePad提供博客系统该有的所有功能以及多种设计风格和外观,如果用户熟悉HTML和CSS,完 ...