I'm using AngularUI Router and I'm trying to have nested/children links.
All works fine but how do I have selected/active link in Contact tab?
Basically, I need to be able to have selected/active contact one link when the Contact page is loaded. Currently it does not read for some reason the controlleroneCtrl
unless I click on the link contact one.
angular
.module ('myApp', ['ui.router'
])
.config (['$urlRouterProvider', '$stateProvider', function ($urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise ('/summary');
$stateProvider.
state ('summary', {
url: '/summary',
templateUrl: 'summary.html',
controller: 'summaryCtrl'
}).
state ('about', {
url: '/about',
templateUrl: 'about.html',
controller: 'aboutCtrl'
}).
state ('contact', {
url: '/contact',
templateUrl: 'contact.html',
controller: 'contactoneCtrl'
})
// Sub page
.state('contact.one',{
url: '/contact.contactone',
templateUrl: 'one.html',
controller: 'contactoneCtrl'
})
// Sub page
.state('contact.two',{
url: '/contact.contacttwo',
templateUrl: 'two.html',
controller: 'contacttwoCtrl'
});
}]);
Plunker: http://plnkr.co/edit/DWjp5M6kJt2MyBrasfaQ?p=preview
There's a much quicker way to do this. Just use the ui-sref-active="active"
attribute instead of ui-sref
.
An example:
<ul>
<li ui-sref-active="active">
<a ui-sref="state">State 1</a>
<li>
<ul>
When the state is active the list item gets the class active. If you want a different class for active states or more than one class, just add it as follows
<ul>
<li ui-sref-active="active so-active super-active">
<a ui-sref="state">State 1</a>
<li>
<ul>
I use the pattern of exposing state
on the root scope and using state.current.name
in templates. I justify this global exposure because it's an app-level concern. If your navigation directive has isolate scope you'll need to pass it in, but that's no biggie.
In practice it's been very good for us I think.
Looks like this:
javascript
app = angular.module ('myApp', ['ui.router']);
app.controller('MainController', function($scope, $state){
$scope.state = $state;
});
html:
<nav>
<ul>
<li ng-repeat="tab in tabs" ng-class="{active: state.current.name === tab.id}>{{tab.name}}</li>
</ul>
</nav>
here is the updated plunk - http://plnkr.co/edit/UjjNm4JJIsjb4ydWZRDi?p=preview
Changes
added a new controller contactCtrl
setup $state.go('contact.contactone');
inside the contactCtrl
updated app.js
so that /contact
points to contactCtrl
I'm using ng-class
like this:
ng-class="{active: state.current.name.split('.')[1] === 'homepage'}"
My "state"
name is structured like:
app
app.homepage
app.profile
app.profile.user
.etc
For example, in my homepage, it's button became like this:
<li ng-class="{active: state.current.name.split('.')[1] === 'homepage'}"><a ui-sref="app.homepage">Home</a></li>
So just define scope of $state
like @Simple As Could Be said at root of the app controllers, and you can use ng-class
to whatever your app's state and how deep your app's state nested.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With