[置顶] AngularJS实战之路由ui-sref-active使用

最新推荐文章于 2022-12-22 17:02:30 发布

柳絮飞祭奠

最新推荐文章于 2022-12-22 17:02:30 发布

阅读量645

点赞数

分类专栏： AngularJS css 文章标签： html css angularjs JavaScript ViewUI

AngularJS 同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

css

3 篇文章 0 订阅

订阅专栏

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

[size=x-large]接下来就看看Angular-UI-Router里的指令ui-sref-active 的使用
其意思就是查看当前激活状态并设置 Class[/size]
代码：

<!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>

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

[img]http://dl2.iteye.com/upload/attachment/0126/9256/842f97df-3493-38e9-bc86-c231737896c4.png[/img]

柳絮飞祭奠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[置顶] AngularJS实战之路由ui-sref-active使用

[size=x-large]当我们使用angularjs的路由时，时常会出现一个需求，当选中菜单时把当前菜单的样式设置为选中状态(多数就是改变颜色)[/size][size=x-large]接下来就看看Angular-UI-Router里的指令ui-sref-active 的使用其意思就是查看当前激活状态并设置 Class[/size]代码：[code="java"]...
复制链接

扫一扫

专栏目录