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

当我们使用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使用

猜你喜欢