当我们使用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. shell脚本小集锦

    1) 如何向脚本传递参数 ? ./script argument 例子: 显示文件名称脚本 ./show.sh file1.txt cat show.sh #!/bin/bash 2) 如何在脚本中使 ...

  2. JQuery UI之Autocomplete(1)入门程序

    1.Autocomplete的主要属性:source:即为指定智能提示下拉框中的数据来源,支持三种类型.  Array,主要用于本地化数据提供,支持两种格式:字符串数组 [ "Choice1 ...

  3. C#中多线程的并行处理

    System.Threading.Tasks,在该命名空间下Task是主类,表示一个类的异步的并发的操作,创建并行代码的时候不一定要直接使用Task类,在某些情况下可以直接使用Parallel静态类( ...

  4. Employee类

    package demo; import java.time.LocalDate; public class Employee { private String name; private doubl ...

  5. SpringMVC之controller篇1

    概述 继 Spring 2.0 对 Spring MVC 进行重大升级后,Spring 2.5 又为 Spring MVC 引入了注解驱动功能.现在你无须让 Controller 继承任何接口,无需在 ...

  6. opencv和openGL的关系

    OpenCV是 Open Source Computer Vision Library OpenGL是 Open Graphics Library OpenCV主要是提供图像处理和视频处理的基础算法库 ...

  7. php 多进程

    php 在使用场景中一般是处理web应用,所以多进程使用不适合在web中使用,且php-fpm中pcntl_fork不能使用,所以使用场景是在cgi模式下 一个进程调用pcntl_fork函数后,系统 ...

  8. Tools.Eclipse.HowToImportAnAndroidLibraryProjectIntoWorkspace

    1. File->New->Other Picture-1 2. Select "Android Project from Existing Code", and cl ...

  9. SVN查看最新几次提交日志的命令

    Windows下,使用svn客户端查看日志很方便,linux下查看的记录条数的小技巧: 1>查看某个目录下的所有日志记录 svn log [PATH] 上面的方式,对于命令行下查看时是很不方便的 ...

  10. BZOJ1912或洛谷3629 [APIO2010]巡逻

    一道树的直径 BZOJ原题链接 洛谷原题链接 显然在原图上路线的总长为\(2(n-1)\). 添加第一条边时,显然会形成一个环,而这条环上的所有边全部只需要走一遍.所以为了使添加的边的贡献最大化,我们 ...