是否可以在有条件的ui路由器中创建嵌套视图?条件已分配给用户角色。
例如,我有两种类型的用户: admin 和 user 。如果用户正在打开设置页面,则ui路由器仅添加分配给他的角色的该视图。
这是我的配置代码的示例
var app = angular.module('myApp', ['ui.router']); app.config(function ($stateProvider, $urlRouterProvider){ $stateProvider .state('home', { url: '/home', templateUrl: '/home.html', controller: 'homeController' }) .state('settings', { url: '/settings', data: { roles: ['admin', 'moderator', 'user'] }, views:{ '':{ templateUrl:'/settings.html', }, 'piView@settings':{ data: { roles: ['user'] }, templateUrl:'/personalInformation.html' }, 'permissionsView@settings':{//load this view if user is administrator //I need some condition for this data: { roles: ['admin'] }, templateUrl: '/permissionsView.html' } }, controller: 'settingsController' }); $urlRouterProvider.otherwise( function($injector) { var $state = $injector.get("$state"); $state.go('/home'); }); });
该视图将为每个用户(管理员或匿名)注入。但是我们可以管理哪个视图。最好的办法是使用 templateProvider 。
templateProvider
根据此问答:
我从上面的来源使用了塞子并对其进行了一些调整
因此,让我们拥有这两个目标 (在index.html内部)
<div ui-view="onlyForAdmin"></div> <div ui-view=""></div>
还有一个州立公共场所,对于Admin,它甚至可以通过以下设置来显示onlyForAdmin的内容:
.state('public', { url: "/public", data: { isPublic: true }, views: { '@' : { templateUrl: 'tpl.html', data: { isPublic: true }, }, 'onlyForAdmin@' : { templateProvider: ['$templateRequest','userService', function($templateRequest,userService) { if(userService.isAdmin()) { return $templateRequest("justForAdmin.html"); } return ""; // other than admin will see nothing } ] } } })
justForAdmin.html (例如<h2>justforadmin</h2>)的内容将仅注入某些授权服务,该用户将以admin身份找到用户…
<h2>justforadmin</h2>
在这里检查