在AngularJS 1.7.x中登录后的ngRoute选项卡菜单

Question

我有ngRoute在登录页面中路由用户，如果成功登录用户可以登陆dasboard页面。

问题是在仪表板页面中，我需要两个或多个选项卡来呈现从可删除控制器驱动的(视图(html页面。 正如我在某个示例中遵循的那样，angularjs 场景中的一个重要点是我需要在索引页面中使用渲染选项卡内容。 但是我希望并且需要在仪表板页面中按选项卡呈现视图：因为索引用于登录机制。

我花了很多时间来实现这一目标，遵循示例和教程，这似乎是整个项目中最困难的部分。 我需要的是仪表板页面内的子路由。 我可能会避免从ngRoute移动到Ui路由器。 我寻找一个简单的解决方案。

法典：

var app = angular.module('main', ['ngRoute', 'ui.bootstrap']);
app.config(function($routeProvider, $locationProvider) {
$routeProvider.when('/', {
templateUrl: 'components/home.html',
controller: 'homeCtrl'
})
.when('/logout', {
resolve: {
deadResolve: function($location, user) {
user.clearData();
$location.path('/');
}
}
})
.when('/login', {
templateUrl: 'components/login.html',
controller: 'loginCtrl'
})
.when('/dashboard', {
resolve: {
check: function($location, user) {
if(!user.isUserLoggedIn()) {
$location.path('/login');
}
},
},
templateUrl: 'components/dashboard.html',
controller: 'dashboardCtrl'
// it is possible a child route for two tabs??
})
.otherwise({
template: '4045'
});

$locationProvider.html5Mode({
enabled: true,
requireBase: true
});
$locationProvider.html5Mode(true);
});

Controller
app.controller('dashboardCtrl', function($scope, $location, user, $http,  $window) {
$scope.tabs = [
{
title: "Visualized",
templateUrl: 'components/trax.html',
controller:'testCtrl'
},
{
title: "Pure JSON",
templateUrl: 'components/trax2.html'
}
,
{
title: "Other",
templateUrl: 'json.html'
}
]
//...
});

what i try:

<tabset justified="true">
<tab ng-repeat="tab in tabs" heading="{{ tab.title }}" active="tab.active">
<div ng-include="tab.templateUrl"></div>
</tab>
</tabset>

所以ng-include渲染良好的html页面，但没有控制器功能。

你能让我在登录成功后实现这个看似简单的选项卡的正确方向吗？

谢谢！

Answer 1

通过指令轻松解决大问题。棒 希望有帮助。 谢谢

<uib-tabset>
<uib-tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" select="onTabSelected(tab.slug)">
<div ng-include="tab.templateUrl"></div>  </uib-tab>
</uib-tabset>
<div ng-controller="testCtrl">
{{nome}}
<div>