具有不同控制器的选项卡
Tab with different controllers
在我的 angular.js 应用程序中,我有一个包含各种选项卡的个人资料视图,每个选项卡都是一个嵌套视图,带有自己的控制器。我想要做的是能够来回点击不同的选项卡,但始终保持在个人资料视图中。
但每次我单击其中一个选项卡时,例如 "nested_view_1" with url "/nested_view_1" 和 templateUrl: "nested_view_1.html",它会将路径更改为“/nested_view_1”并呈现一个空白页面(因为我没有在 $routeProvider
中指定“/nested_view_1”)。只有当我点击返回时,它才会在我的视图中显示我选择的选项卡内容
可能是我同时使用 ui.router
和 ng-route
的问题。
这是我的 app.js
文件:
var app = angular.module('app', ['ngRoute', 'ui.router','ui.bootstrap','ui.bootstrap.tpls'])
app.config(['$routeProvider', '$stateProvider' ,function ($routeProvider, $stateProvider) {
$routeProvider
.when('/', {
templateUrl: '/app/views/home.html',
controller: 'HomepageCtrl'
})
.when('/articles', {
templateUrl: 'app/views/articles/index.html',
controller: 'ArticlesCtrl'
})
.when('/articles/:id', {
templateUrl: 'app/views/articles/show.html',
controller: 'ShowArticleCtrl'
})
... other routes ...
$stateProvider
.state('profile', {
abstract: true,
url: '/profile',
templateUrl: "app/views/users/profile.html",
controller: 'UserShowCtrl'
})
.state('nested_view_1', {
url: '/nested_view_1',
views: {
"tabContent": {
templateUrl: 'app/views/users/sales.html',
controller: 'UserSalesAreaCtrl'
}
}
})
.state('nested_view_2', {
url: "/nested_view_2",
views: {
"tabContent": {
templateUrl: 'app/views/users/buys.html',
controller: 'UserAreaCtrl'
}
}
})
.... all the way to nested view 4, in my case
}])
我的看法:
<ul class="nav nav-tabs mt-50" >
<li ng-repeat="t in tabs" class="nav-item" heading="{{t.heading}}" active="t.active">
<a ui-sref="{{t.route}}" style="font-weight: 200;" class="nav-link" ng-class="{'active'}" >
{{ t.heading }}
</a>
</li>
<div ui-view="tabContent"></div>
</ul>
我的UserShowCtrl
angular.module('app').controller('UserShowCtrl', ['$scope', 'user', '$routeParams', '$location', '$state',
function ($scope, user, $routeParams, $location, $state) {
$scope.tabs = [
{ heading: 'nested_view_1', route:'nested_view_1', active:true },
{ heading: 'nested_view_2', route:'nested_view_2', active:false },
{ heading: 'nested_view_3', route:'nested_view_3', active:false },
{ heading: 'nested_view_4', route:'nested_view_4', active:false }
];
}]);
用父路由 parent 作为嵌套路由的前缀。
$stateProvider
.state('profile', {
abstract: true,
url: '/profile',
templateUrl: "app/views/users/profile.html",
controller: 'UserShowCtrl'
})
.state('profile.nested_view_1', {
url: '/nested_view_1',
views: {
"tabContent": {
templateUrl: 'app/views/users/sales.html',
controller: 'UserSalesAreaCtrl'
}
}
})
.state('profile.nested_view_2', {
url: "/nested_view_2",
views: {
"tabContent": {
templateUrl: 'app/views/users/buys.html',
controller: 'UserAreaCtrl'
}
}
})
在我的 angular.js 应用程序中,我有一个包含各种选项卡的个人资料视图,每个选项卡都是一个嵌套视图,带有自己的控制器。我想要做的是能够来回点击不同的选项卡,但始终保持在个人资料视图中。
但每次我单击其中一个选项卡时,例如 "nested_view_1" with url "/nested_view_1" 和 templateUrl: "nested_view_1.html",它会将路径更改为“/nested_view_1”并呈现一个空白页面(因为我没有在 $routeProvider
中指定“/nested_view_1”)。只有当我点击返回时,它才会在我的视图中显示我选择的选项卡内容
可能是我同时使用 ui.router
和 ng-route
的问题。
这是我的 app.js
文件:
var app = angular.module('app', ['ngRoute', 'ui.router','ui.bootstrap','ui.bootstrap.tpls'])
app.config(['$routeProvider', '$stateProvider' ,function ($routeProvider, $stateProvider) {
$routeProvider
.when('/', {
templateUrl: '/app/views/home.html',
controller: 'HomepageCtrl'
})
.when('/articles', {
templateUrl: 'app/views/articles/index.html',
controller: 'ArticlesCtrl'
})
.when('/articles/:id', {
templateUrl: 'app/views/articles/show.html',
controller: 'ShowArticleCtrl'
})
... other routes ...
$stateProvider
.state('profile', {
abstract: true,
url: '/profile',
templateUrl: "app/views/users/profile.html",
controller: 'UserShowCtrl'
})
.state('nested_view_1', {
url: '/nested_view_1',
views: {
"tabContent": {
templateUrl: 'app/views/users/sales.html',
controller: 'UserSalesAreaCtrl'
}
}
})
.state('nested_view_2', {
url: "/nested_view_2",
views: {
"tabContent": {
templateUrl: 'app/views/users/buys.html',
controller: 'UserAreaCtrl'
}
}
})
.... all the way to nested view 4, in my case
}])
我的看法:
<ul class="nav nav-tabs mt-50" >
<li ng-repeat="t in tabs" class="nav-item" heading="{{t.heading}}" active="t.active">
<a ui-sref="{{t.route}}" style="font-weight: 200;" class="nav-link" ng-class="{'active'}" >
{{ t.heading }}
</a>
</li>
<div ui-view="tabContent"></div>
</ul>
我的UserShowCtrl
angular.module('app').controller('UserShowCtrl', ['$scope', 'user', '$routeParams', '$location', '$state',
function ($scope, user, $routeParams, $location, $state) {
$scope.tabs = [
{ heading: 'nested_view_1', route:'nested_view_1', active:true },
{ heading: 'nested_view_2', route:'nested_view_2', active:false },
{ heading: 'nested_view_3', route:'nested_view_3', active:false },
{ heading: 'nested_view_4', route:'nested_view_4', active:false }
];
}]);
用父路由 parent 作为嵌套路由的前缀。
$stateProvider
.state('profile', {
abstract: true,
url: '/profile',
templateUrl: "app/views/users/profile.html",
controller: 'UserShowCtrl'
})
.state('profile.nested_view_1', {
url: '/nested_view_1',
views: {
"tabContent": {
templateUrl: 'app/views/users/sales.html',
controller: 'UserSalesAreaCtrl'
}
}
})
.state('profile.nested_view_2', {
url: "/nested_view_2",
views: {
"tabContent": {
templateUrl: 'app/views/users/buys.html',
controller: 'UserAreaCtrl'
}
}
})