当我们使用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的...
ui-sref 一般使用在 …； 消息中心 $state.go(‘someState’)一般使用在 controller里面； .controller('firstCtrl', function($scope, $state) { $state.go('login'); }); 这两个本质上是一样的东西，我们看ui-...
`UI-Router`是AngularJS的一个第三方扩展，它提供了更高级的路由功能，包括视图的嵌套、命名视图、抽象状态等。下面我们将深入探讨`UI-Router`的主要特性和用法。 1. **安装和引用** 使用`UI-Router`之前，需要在...
在AngularJS中，UI-Router是一个强大的状态管理工具，它允许我们定义复杂的导航结构并管理页面间的路由。本文将深入讲解如何在UI-Router中使用`ui-view`进行参数传递，以及如何在目标视图中接收这些参数。 首先，...
在AngularJS中，UI-Router是一个强大的路由模块，它允许开发者创建复杂的多级路由结构，以实现单页应用(SPA)的导航和视图管理。本文将深入探讨如何在UI-Router中实现二级嵌套路由，以实现更灵活的页面布局。 首先，...
<a ui-sref="home" ui-sref-active="active">首页 ``` **嵌套状态与动态参数** `ui-router`的一个强大特性是支持嵌套状态和动态参数。例如，你可以定义一个`items`状态，里面包含一个子状态`items.phone`，并传递...
本文将深入解析AngularJS之UI-Router，帮助开发者更好地理解和运用这一工具。 首先，要使用UI-Router，我们需要在HTML文件中引入必要的JavaScript库。确保先引入`angular.min.js`，因为它是AngularJS的核心库，然后...
在AngularJS中，`ngRoute`是基础的路由模块，但当涉及到深层次的路由和视图嵌套时，`ui-router`（来自AngularUI团队）提供了更高级的功能。 1. **ngRoute的局限性** - ngRoute只支持单一视图，即每个页面只有一个...
AngularJS的ui-router是一个强大的路由管理系统，特别适合处理复杂的单页应用（SPA）中的路由需求，尤其是涉及到视图的嵌套和动态数据传递的情况。它弥补了原生ngRoute在处理多层视图和参数传递方面的不足。 在原生...
3. 在模板中，使用`ui-sref`指令来链接到相应的路由状态，这样当用户点击链接时，ocLazyLoad会自动加载对应状态所需的资源。 总结起来，Angular-Ui-Router+ocLazyLoad的动态加载策略是一种高效的方法，可以显著改善...
xxxxxxxxxx <li ui-sref-active="active" ng-if="!entry.isGateway"><a ui-sref="dashboard.flow({app: entry.app})"> <i class="glyphicon glyphicon-filter"></i> 流控规则</a></li>html
在AngularJS开发中，UI Router是一个强大的状态管理工具，它扩展了AngularJS的路由功能，允许我们定义更复杂的导航结构和视图嵌套。本篇文章将深入讲解AngularJS UI Router的基本用法和核心概念，帮助开发者更好地...
有一种方式就是使用 ui-sref-opts功能，我试了，结果不好使，不知道是哪里出的问题： <a> 链接1 在网上查了一下，说是可以写click事件，试了一下，依然不好使，郁闷: $state.go(‘page1’, {id:1}, {reload: true}) ...
在AngularJS中，路由是应用程序的核心组成部分，它允许在不同视图之间导航并管理页面间的数据传递。在本文中，我们将深入探讨AngularJS中的路由及其页面传参。 首先，让我们了解什么是AngularJS的路由。AngularJS的...
- 路由传参：使用`$state.go`或`ui-sref`结合路由参数传递数据。 - 广播和监听：通过`$rootScope`进行消息广播，但需注意广播的时机，可能需要延迟执行。 - 全局变量：在`window`对象上定义变量，但这不是最佳实践，...
在Angular中，路由通常通过`ui-router`库来管理，它允许我们定义各个状态（state）及其对应的URL、模板和控制器。以下是一个配置示例： ```javascript $stateProvider .state('firstPage', { url: '/Page/first...
--ui-sref="category"--> <div class="button icon-left ion-navicon button-clear" ng-click="toggleCategory()"> <!--<div class="button icon-left ion-navicon button-clear" ng-click="modal.show()"></div>-...