Angularjs navigation menu with UI-Bootstrap and UI-Router tabs
In this Plunker , I am unable to set up the menu links and tabs correctly. As you can see, I need to double click on "Route 1" to get back from the "Route 2" tab, moreover, when I double click on the "Route 2" menu link, the contents of the tabs are not displayed.
I think this is the important piece of code that matters:
myapp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider
.state('route1', {
url: "/",
templateUrl: "route1.html"
})
.state('DocumentoMasterView', {
url: "/route2",
templateUrl: "route2.html",
controller: 'myAppController'
})
.state('DocumentoMasterView.A', {
url: '/detail',
templateUrl: 'route2.A.view.html',
controller: 'myAppController'
})
.state('DocumentoMasterView.B', {
url: '/image',
templateUrl: 'route2.B.view.html',
controller: 'myAppController'
})
.state('DocumentoMasterView.C', {
url: '/submenu',
templateUrl: 'route2.C.view.html',
controller: 'myAppController'
})
});
myapp.controller('myAppController',['$scope','$state',function($scope, $state){
$scope.tabs = [
{ heading: 'A View', route:'DocumentoMasterView.A', active:true},
{ heading: 'B View', route:'DocumentoMasterView.B', active:false },
{ heading: 'C View', route:'DocumentoMasterView.C', active:false }
];
$scope.go = function(route){
$state.go(route);
};
$scope.active = function(route){
return $state.is(route);
};
$scope.$on('$stateChangeSuccess', function() {
$scope.tabs.forEach(function(tab) {
tab.active = $scope.active(tab.route);
});
});
source to share
I made this change to make this example work (check here )
we don't need to change the state in this case
// instead of this
$scope.go = function(route){
$state.go(route);
};
$scope.$on('$stateChangeSuccess', function() {
$scope.tabs.forEach(function(tab) {
tab.active = $scope.active(tab.route);
});
});
we have to handle all tabs in a tab
// use just this
$scope.go = function(t){
$scope.tabs.forEach(function(tab) {
tab.active = $scope.active(t.route);
});
$state.go(t.route);
};
Check here
Also, try reconsidering usage <div ng-controller="myAppController">
with ui-router. It might work, but with states you can define all parts more efficiently.
Here I tried to show how ... no ng controller, parent layout state ...
source to share
The radius response is great, but this is an outdated / bloated method. ui-router has active states that make all this css and states change from view rather than having logic in your controller.
In your navigator:
<ul>
<li ui-sref-active="active" class="item">
<a href ui-sref="route1">route1</a>
</li>
</ul>
And here it is! In the current active state / view, this li element will have the ui-sref-active = "active" class applied. where "active" is the class name that is being applied.
For your specific navigator, it will look like this:
<ul>
<li ui-sref-active="active" class="item">
<a href ui-sref="route1">route1</a>
</li>
<li ui-sref-active="active" class="item">
<a href ui-sref="DocumentoMasterView">DocumentoMasterView</a>
</li>
<li ui-sref-active="active" class="item">
<a href ui-sref="DocumentoMasterView.A">DocumentoMasterView.A</a>
</li>
<li ui-sref-active="active" class="item">
<a href ui-sref="DocumentoMasterView.B">DocumentoMasterView.B</a>
</li>
<li ui-sref-active="active" class="item">
<a href ui-sref="DocumentoMasterView.C">DocumentoMasterView.C</a>
</li>
</ul>
source to share