UI路由器嵌套意见condtions [英] ui router nested views condtions

问题描述

是有可能创造的UI路由器条件嵌套的看法？
的条件被分配到的用户角色。

例如我有两种类型的用户：管理和用户即可。
如果用户在打开设置页面，然后UI路由器只添加这种观点是分配给他的角色。

下面的例子是我的配置code的

  VAR应用= angular.module（'对myApp'，['ui.router']）;
的app.config（函数（$ stateProvider，$ urlRouterProvider）{
    $ stateProvider
        .STATE（'家'，{
            网址：'/家，
            templateUrl：/home.html'，
            控制器：HomeController的
        }）
        .STATE（设置，{
            网址：/设置
            数据：{
                角色：['管理'，'主持人'，'用户']
            }，
            观点：{
                ''：{
                    templateUrl：'/ settings.html'，
                }，
                piView @设置：{
                    数据：{
                        角色：['用户']
                    }，
                    templateUrl：'/ personalInformation.html
                }，
                permissionsView @设置：{//如果用户是管理员载入该视图
                                            //我需要一些这方面的情况
                    数据：{
                        角色：管理员]
                    }，
                    templateUrl：/permissionsView.html
                }
            }，
            控制器：'settingsController
        }）;
    $ urlRouterProvider.otherwise（函数（$喷油器）{
      变量$状态= $ injector.get（$状态）;
      $ state.go（'/家）;
    }）;
}）;
 

解决方案

该视图将被注入为每个用户（管理员或匿名）。但是，我们可以管理视图。最好的VAY将使用 templateProvider 。

根据这个Q＆放大器;答：

混淆$ locationChangeSuccess和$ stateChangeStart

我用plunker从上面源和调整，有点

那么，让我们这两个目标的（index.html的内侧）的

 ＆LT;格UI视图=onlyForAdmin＆GT;＆LT; / DIV＆GT;
＆LT;格UI视图=＆GT;＆LT; / DIV＆GT;
 

和一个国家公众，这对于管理员将揭示onlyForAdmin甚至内容，像这样设置的：

  .STATE（'公'，{
      网址：/公，
      数据：{isPublic：真正}，
      观点：{
        '@'：{
          templateUrl：tpl.html'，
          数据：{isPublic：真正}，
        }，
        onlyForAdmin @：{
          templateProvider：['$ templateRequest'，'userService'，
            功能（$ templateRequest，userService）
            {
              如果（userService.isAdmin（））
              {
                返回$ templateRequest（justForAdmin.html）;
              }
              返回; //不是管理员会看到其他什么
            }
          ]
        }
      }
}）
 

的 justForAdmin.html 的（例如＆LT; H2＆GT;只是管理与LT; / H＆GT; ）的内容将被注入只是一些授权服务会发现用户以管理员...

检查一下这里

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

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.

Here is example of my config code

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');
    });
});

解决方案

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.

Based on this Q & A:

Confusing $locationChangeSuccess and $stateChangeStart

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

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

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

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
            }
          ]
        } 
      } 
})

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...

Check it here

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