ui 路由器嵌套视图条件 [英] ui router nested views condtions

问题描述

是否可以在有条件的 ui 路由器中创建嵌套视图?条件分配给用户角色.

is it possible to create a nested views in ui router with conditions? The conditions is assigned to the user roles.

例如，我有两种类型的用户:admin 和 user.如果用户正在打开设置页面，则 ui router 将仅添加分配给他的角色的此视图.

For example I have two types of users: admin and user. If user is opening the setting page then ui router is adding only this view which is assign to his role.

这是我的配置代码示例

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.

The view will be injected for each user (admin or anonymous). But we can manage which view. The best vay would be to use templateProvider.

基于这个问答答:

我使用了上述来源的 plunker 并稍微调整了一下

I used the plunker from above source and adjusted it a bit

所以，让我们有这两个目标(在 index.html 内)

So, let's have these two targets (inside of index.html)

<div ui-view="onlyForAdmin"></div>    
<div ui-view=""></div>

还有一个状态公开，对于管理员来说，它甚至会显示 onlyForAdmin 的内容，设置如下:

And a state public, which for Admin will reveal even content of the onlyForAdmin, with settings like this:

.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 的内容(例如

just for admin

)将仅注入某些授权服务会发现用户为管理员...

the content of the justForAdmin.html (e.g. <h2>just for admin</h2>) will be injected only of some authorization service will find user as admin...

在这里

这篇关于ui 路由器嵌套视图条件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！