AngualrJs ui-router动态设置ng-class_ng-class $state-优快云博客

本文介绍了如何在AngularJS中利用路由和ng-class指令实现导航菜单的动态样式切换，包括单击时设置样式及页面刷新后的样式保持。通过具体实例展示了不同场景下的实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一种情况：只实现路由点击动态设置ng-class效果

<style>
.active{
background-color: red;
height: 500px;
width: 500px;
}
</style>

例子一：

<ul>
<li data-ng-repeat="image in images" data-ng-click="toggleObject.item = $index">a
<img data-ng-class="{'active' : toggleObject.item == $index}" src="" /><br>
</li>
</ul>
<script>
var app = angular.module('app', ['ui.router']);
app.controller('HolaCtrl', ["$state", "$scope", function ($state, $scope) {
$scope.images = [1,2,3];
$scope.toggleObject = {item: -1};
}]);
</script>

例子二：

<li ng-class="{active: isActive('/home')}"><a ui-sref="app.home">Browse Journal</a></li>

app.controller('navCtrl', ['$scope', '$location', function($scope, $location) {
$scope.isActive = function(destination) {
return destination === $location.path();
}
}]);

第二种情况：实现路由点击动态设置ng-class效果同时，刷新页面还是显示当前点击的路由样式（建议使用）

var app = angular.module('app', ['ui.router']);

1.可以通过获取$state状态使用ng-class来设置所需的类名。如果您需要使视图在控制器中的范围内可用，请使用$state：

app.controller('mainCtrl', ['$scope', '$state', function($scope, $state) {
$scope.$state = $state;
}]);

2.如果你想不把它设置在每个控制器，你可以在app.run里面定义$rootScope：

app.run(function($rootScope, $state) {
$rootScope.$state = $state;
// 或者在路由加载成功后设置
$rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) {
$rootScope.$state = toState;
}

});

在你视图下，你仍可以使用ui-sref-active并使用ng-class来判断当前的$state的名字。例如（替换应用程序逻辑）：
<li>
<a ui-sref-active="current"
ng-class="{'current': $state.current.name == 'advertiser.candidate'}"
ui-sref=".bookmarks"
data-ng-click="loadCandiatePage('bookmarks')">
Bookmarks <span class="sr-only"></span>
</a>
</li>
<div ui-view>