当我们使用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的样式
- 大小: 8.8 KB
分享到：
相关推荐
此篇关于AngularJS ui-sref的简单使用，最近刚好学习，就顺便发到随笔上了 具体用法： 男人 这是一个非常简单的ui-sref的使用，当JavaScript重新生成网页时，它会查找$state中名为“man”的state，读取这个state的...
在AngularJS中，`ui-sref` 和 `$state.go` 都是AngularUI Router库中的功能，用于在应用中导航到不同的状态（states）。它们在使用场景和语法上略有不同，但最终都调用了 `$state.go` 方法来实现状态切换。 ### 1. ...
【AngularJS ui-router (嵌套路由)】 在AngularJS中，路由是用于处理应用程序导航和视图呈现的核心机制。ui-router是AngularJS的一个第三方模块，它扩展了原生的ng-route，提供了更强大的功能，包括支持嵌套路由和...
总而言之，AngularJS ui-router刷新子页面路由的方法涉及对$state服务和$timeout服务的合理运用，通过控制器中的函数调用以及配置ui-sref指令等方式实现。开发者需要根据实际应用场景灵活选择合适的方法，并通过测试...
`UI-Router`是AngularJS的一个第三方扩展，它提供了更高级的路由功能，包括视图的嵌套、命名视图、抽象状态等。下面我们将深入探讨`UI-Router`的主要特性和用法。 1. **安装和引用** 使用`UI-Router`之前，需要在...
6. **路由导航**：在应用中使用`ui-sref`指令或`$state`服务进行导航，根据当前状态加载相应的视图。 7. **测试与优化**：进行单元测试和端到端测试，确保应用功能正常。优化性能，例如通过懒加载减少初始加载时间...
UI Router是AngularJS的一个扩展模块，它提供了一种更高级的路由方案，比AngularJS自带的$router服务功能更为强大。在这个"用于AngularJS的UI路由器 - Hello World！"教程中，我们将深入探讨如何使用UI Router来构建...
在AngularJS中，UI-Router是一个强大的状态管理工具，它允许我们定义复杂的导航结构并管理页面间的路由。本文将深入讲解如何在UI-Router中使用`ui-view`进行参数传递，以及如何在目标视图中接收这些参数。 首先，...
这个"angularjs ui.router嵌套路由demo"是一个示例项目，旨在帮助开发者理解并掌握如何在AngularJS应用中使用UI-Router实现复杂的页面布局和导航。 UI-Router的核心概念包括状态（states）和视图（views）。状态...
在AngularJS中，UI-Router是一个强大的路由模块，它允许开发者创建复杂的多级路由结构，以实现单页应用(SPA)的导航和视图管理。本文将深入探讨如何在UI-Router中实现二级嵌套路由，以实现更灵活的页面布局。 首先，...
<a ui-sref="home" ui-sref-active="active">首页 ``` **嵌套状态与动态参数** `ui-router`的一个强大特性是支持嵌套状态和动态参数。例如，你可以定义一个`items`状态，里面包含一个子状态`items.phone`，并传递...
在UI-Router中，**状态**是核心概念之一。每个状态对应于应用的一个特定部分或“页面”，通常与URL相关联。当用户与应用交互时，不同的状态会被激活或取消激活，从而实现界面的变化。这种机制使得开发者可以更容易地...
而在AngularJS的生态中，UI-Router是一个不可或缺的部分，它为开发者提供了更为灵活和强大的路由管理机制。本篇文章将深入探讨`前端项目-angular-ui-router.zip`中的核心知识点，帮助读者全面理解并掌握UI-Router的...
其中，ui-route模块是AngularJS官方推荐的状态管理机制，它允许开发者更加灵活地管理不同的视图和状态，类似于传统的路由控制器，但更加专注于页面状态的定义和管理。 ui-router的核心概念之一是状态（state），每...
本文将深入解析AngularJS之UI-Router，帮助开发者更好地理解和运用这一工具。 首先，要使用UI-Router，我们需要在HTML文件中引入必要的JavaScript库。确保先引入`angular.min.js`，因为它是AngularJS的核心库，然后...
AngularJS UI-Router 是一个强大的路由库，专为AngularJS应用程序设计，用于处理单页应用（SPA）中的页面导航和状态管理。它扩展了AngularJS的内置路由功能，提供了更灵活和可配置的路由机制。在本文中，我们将深入...