当我们使用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. Android沉浸式状态栏背景色以及字体颜色的修改

    在activity中设置透明状态栏 的思路:    1.让activity的布局全屏 此时布局会和状态栏重叠        2.让布局最上方预留出和状态栏高度一样的高度,将状态栏的背景色设置为透明 效 ...

  2. ROS安装

    本文参考地址:http://ros.exbot.net/wiki/cn(2f)indigo(2f)Installation(2f)Ubuntu.html http://wiki.ros.org/ind ...

  3. 初次搭建spring-boot 整合ssm（有许多小坑）

    首先,我是采用官网下载,版本最好选择1.5.16的(这是重点) 下载完毕后,用idea打开解压后的项目. 1.整合spring-mvc 在pom.xml中加入web依赖 <dependency& ...

  4. c# 运行大运算程序主窗体卡掉的解决

    写了一个运算过滤大文本的程序, 其中方法里边使用了多线程,并行线程等方法.  但主窗体控件直接使用此方法时,页面卡顿.所以主线程被堵塞. 代码如下, splitfile 这个方法运行时页面卡顿,阻塞了 ...

  5. nginx日志

    相关知识可参考文章:nginx日志格式及自定义日志配置 1.查看nginx的log配置 1)vim /etc/nginx/nginx.conf 打开为 user nginx;worker_proces ...

  6. Android.ApplicationCrash

    1. 如何调试分析Android中发生的tombstone http://www.360doc.com/content/12/1017/10/7580194_241974419.shtml tombs ...

  7. 探索未知种族之osg类生物---呼吸分解之事件循环一

    事件循环和更新循环 终于到了我们嘴里经常念叨的事件循环.更新循环以及渲染循环了.首先我们来区分一下事件循环和渲染循环,他们两个首先是两个不同顺序执行的过程,我们有时候会用到任意node的updateC ...

  8. Windows下war包部署到Linux下Tomcat出现的问题

    最近,将Windows下开发的war包部署到Linux下的Tomcat时报了一个错误:tomcat error in opening zip file.按理说,如果正常,当把war包复制到webapp ...

  9. 搭建Fabric网络（一）安装开发工具

    Fabric V1.1.0已经发布了,这里准备一篇文章来介绍Fabric V1.1.0 网络怎么搭建. 安装cURL https://curl.haxx.se/download.html 安装Dock ...

  10. QT学习之路(1):彩票绝对不中模拟器

    //============================================//绝对不中,彩票开奖模拟器#include "mainwindow.h"#includ ...