I am attempting to highlight the clicked area by adding an active class using ui-sref-active. Unfortunately, it is not working with $state.includes(), even though I can see its value as true in the controller. Can someone assist me with this issue?
See the code snippet below:
var app = angular.module('myApp', ['ui.router']);
app.controller('myCtrl', function($scope,$state) {
$scope.res=$state.includes('')
});
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('page');
$stateProvider
.state('page', {
url: '/page',
template: "You clicked on Luffy"
})
.state('paper', {
url: '/paper',
template: "You clicked on Zoro"
})
}).active {
background-color: red;
color: white;
}<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<hr>
<h2>with ui-sref-active</h2>
<button ui-sref-active=active ui-sref='page'>Luffy</button>
<button ui-sref-active=active ui-sref='paper'>Zoro</button>
<hr>
<h2>with {'active':$state.includes('')}</h2>
<button ng-class="{'active':$state.includes('page')}" ui-sref='page'>Luffy</button>
<button ng-class="{'active':$state.includes('paper')}" ui-sref='paper'>Zoro</button>
<hr> Result=
<ui-view></ui-view>
<hr>
</div>
</body>
</html>