带有UI

带有UI-Bootstrap选项卡和UI-Router的Angularjs导航菜单(Angularjs navigation menu with UI-Bootstrap tabs and UI-Router)

在这个Plunker中 ，我无法使菜单链接和标签正常工作。 正如您所看到的，我需要点击两次“路线1”以从标签Route2返回，而且当我点击两次“路线2”菜单链接时，标签内容不会被渲染。

我认为这是代码中相关的重要部分：

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); }); });

In this Plunker, I'm unable to make menu links and tabs to work properly. As you can see I need to click twice the 'Route 1' to go back from tabs Route2, moreover when I click twice the 'Route 2' menu link, the tabs content is not rendered.

I think this is the relevant part of the 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); }); });