带有 UI-Bootstrap 选项卡和 UI-Router 的 Angularjs 导航菜单 [英] Angularjs navigation menu with UI-Bootstrap tabs and UI-Router
问题描述
在 这个 Plunker 中,我无法使菜单链接和选项卡正常工作适当地.如您所见,我需要单击Route 1"两次才能从选项卡 Route2 返回,而且当我单击Route 2"菜单链接两次时,不会呈现选项卡内容.
我认为这是重要的代码的相关部分:
myapp.config(function($stateProvider, $urlRouterProvider) {$urlRouterProvider.otherwise("/");$stateProvider.state('route1', {网址:/",templateUrl: "route1.html"}).state('DocumentoMasterView', {网址:/route2",templateUrl: "route2.html",控制器:'myAppController'}).state('DocumentoMasterView.A', {网址:'/详细信息',templateUrl: 'route2.A.view.html',控制器:'myAppController'}).state('DocumentoMasterView.B', {网址:'/图片',templateUrl: 'route2.B.view.html',控制器:'myAppController'}).state('DocumentoMasterView.C', {url: '/子菜单',templateUrl: 'route2.C.view.html',控制器:'myAppController'})});myapp.controller('myAppController',['$scope','$state',function($scope, $state){$scope.tabs = [{heading: 'A View', route:'DocumentoMasterView.A', active:true},{ 标题:'B 视图',路线:'DocumentoMasterView.B',活动:假},{ 标题:'C 视图',路线:'DocumentoMasterView.C',活动:假}];$scope.go = 函数(路由){$state.go(route);};$scope.active = 函数(路由){返回 $state.is(route);};$scope.$on('$stateChangeSuccess', function() {$scope.tabs.forEach(function(tab) {tab.active = $scope.active(tab.route);});});
我进行了此更改以使该示例正常工作(检查它 这里)
在这种情况下我们不需要状态改变
//而不是这个$scope.go = 函数(路由){$state.go(route);};$scope.$on('$stateChangeSuccess', function() {$scope.tabs.forEach(function(tab) {tab.active = $scope.active(tab.route);});});
我们应该处理所有选项卡上的选择
//只使用这个$scope.go = 函数(t){$scope.tabs.forEach(function(tab) {tab.active = $scope.active(t.route);});$state.go(t.route);};
在此处
检查另外,尝试重新考虑将
这里 我试图展示如何...没有 ng-controller,父母布局状态...
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);
});
});
I've made this change to make that example working (check it here)
we do not need state change 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 should handle all the on tab selection
// use just this
$scope.go = function(t){
$scope.tabs.forEach(function(tab) {
tab.active = $scope.active(t.route);
});
$state.go(t.route);
};
Check it here
Also, try to reconsider using of the <div ng-controller="myAppController">
with ui-router. It could work, but with states you can define all the parts more effectively.
Here I tried to show how to... no ng-controller, parent layout state...
这篇关于带有 UI-Bootstrap 选项卡和 UI-Router 的 Angularjs 导航菜单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!