AngularJS - Multiple "ui-sref" in single "ui-sref-active"
HTML:
<!-- Order -->
<li ui-sref-active="active">
<a ui-sref="order" class="main_link">
<i class="fa fa-shopping-cart"></i>Order
</a>
<a ui-sref="order/create"><span class="plus">+</span></a>
<div class="clearfix"></div>
</li>
I want to add class="active"
to <li>
.
Whenever you click on <a ui-sref="order/create"><span class="plus">+</span></a>
, this time is class="active"
added to <li>
.
BUT
click
<a ui-sref="order" class="main_link"><i class="fa fa-shopping-cart"></i>Order</a>
to class="active"
not add the time to <li>
.
Your help will be appreciated.
source to share
app.js
var app = angular.module('plunker', ['ui.router']);
app.config([ '$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/home/flow");
$stateProvider.state("home", {
url : '/home',
templateUrl : 'home.html',
}).state("contact", {
url : '/contact',
template : 'contact',
});
}]);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
index.html
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.28/angular.js" data-semver="1.2.28"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<li class="top" ui-sref-active="heaader_active">
<a ui-sref="home"><i class="fa fa-cloud-upload"></i> Home</a>
<a ui-sref="contact"><i class="fa fa-cloud-upload"></i> contact</a>
</li>
<ui-view/>
</body>
</html>
style.css
/* Put your css in here */
.heaader_active {
background: red;
}
More More More Here
source to share
The implementation method is ui-router
not possible. You cannot specify for which specific it ui-sref
will be activated ui-sref-active
. That being said, it should be easy to customize the template to wrap these links in such a way that you can have one ui-sref-active
by one ui-sref
. At least, it's easier to customize the behavior ui-router
.
source to share