[英]Angular + ui-angular dynamic tabs with dynamic controllers
I need to construct permission based admin dashboard. 我需要构建基于权限的管理仪表板。 Header of html consists of some main havs and the last nav is for
Settings
. html的标题由一些主要的hav组成,最后一个导航用于
Settings
。 I use angular-ui-router
for states. 我使用
angular-ui-router
作为状态。 and when user goes to the Settings
link I need to upload from server tabs that user has access to. 当用户进入“
Settings
链接时,我需要从用户有权访问的服务器选项卡上传。
My state provider 我的州提供者
$stateProvider
.state('home', {
url: "/",
templateUrl: "templates/home/index.html"
})
.state('settings', {
url: "/settings",
controller: "SettingsController",
templateUrl: "templates/home/settings.html",
})
.state('settings.users', {
url: "/users",
controller: "SettingsUsersController",
templateUrl: "templates/home/settings/users.html",
})
.state('settings.roles', {
url: "/roles",
controller: "SettingsRolesController",
templateUrl: "templates/home/settings/roles.html",
});
SettingsController
looks like this: SettingsController
看起来像这样:
app.controller('SettingsController', ['$scope', '$http',
function($scope, $http) {
$scope.tabs = [];
$http({
method: 'GET',
url: '/api/menu/get'
}).
success(function(data, status, headers, config) {
$scope.tabs = data;
}).
error(function(data, status, headers, config) {
window.location = '/auth/login';
});
}
]);
Sample server answer 示例服务器答案
[{
"url": "settings.users",
"title": "Users"
}, {
"url": "settings.roles",
"title": "Roles"
}]
My settings.html
我的
settings.html
<div class="container">
<ul class="nav nav-tabs nav-justified">
<li ng-repeat="tab in tabs" ng-class="{active: $first}">
<a href="{{tab.url}}">{{tab.title}}</a>
</li>
</ul>
</div>
How to load first tab on $http
end in SettingsController
, also to connect it to corresponding Controller? 如何在
SettingsController
加载$http
端的第一个选项卡,也将它连接到相应的Controller? And how to switch active tab on different states? 以及如何在不同状态下切换活动标签?
Don't know if it is possible to define routes dynamically, but you could achieve your targets the following way. 不知道是否可以动态定义路线,但您可以通过以下方式实现目标。
Additionally, it's worth checking on server side if user has permissions to page when he tries to load it. 此外,如果用户在尝试加载页面时具有页面权限,则值得在服务器端进行检查。 Because he can look at code and to try to access it bypassing the navigation.
因为他可以查看代码并尝试绕过导航来访问它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.