带有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); }); });更多推荐
发布评论