Menu de navegação do Angularjs com guias UI-Bootstrap e UI-Router
Noeste Plunker, Não consigo criar links e guias de menu para funcionar corretamente. Como você pode ver, preciso clicar duas vezes na 'Rota 1' para voltar das guias Rota2; além disso, quando clico duas vezes no link do menu 'Rota 2', o conteúdo das guias não é renderizado.
Eu acho que essa é a parte relevante do código que importa:
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);
});
});