当前位置: 首页 > 面试题库 >

ui路由器嵌套视图条件

柯伟志
2023-03-14
问题内容

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

例如,我有两种类型的用户: adminuser 。如果用户正在打开设置页面,则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

根据此问答:

$ locationChangeSuccess和$stateChangeStart混淆

我从上面的来源使用了塞子并对其进行了一些调整

因此,让我们拥有这两个目标 (在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身份找到用户…

在这里检查



 类似资料:
  • 问题内容: 我有这样的结构: 我希望能够在如下所示的主要状态下定义模板,而不必在子状态下进行管理。 我希望命名的ui视图不是其子状态,并由该状态的views对象而不是子状态的templateUrl字段填充。我怎样才能做到这一点? 问题答案: 我们可以在 一种* 状态下使用 更多 视图,请参阅: * 多个命名视图 该定义只需要使用绝对命名即可: 如此处详细说明: 视图名称-相对名称与绝对名称 在幕后

  • 问题内容: 我正在尝试创建文件查看器,并且想嵌套子目录。我正在使用ui-router,我希望每个子目录都有其自己的URL和状态。 说我有以下结构: 我希望我的路线是: 我想递归地执行此操作,而不是为每个子目录创建一个新状态 问题答案: 我建议用 一种状态 和 一种参数 - 来做。因为应该尽快定义所有状态,以支持url路由。所有这些唯一的folderPath可能不同,也可能是动态的-在运行时中,在应

  • 问题内容: 建立一个多步骤表单(“向导”)。最初是按照本教程进行的,该教程效果很好,但是现在尝试对其进行调整,因此第一步已嵌入首页中,而不是单独的状态。无论我做什么,我都无法创建一条可行的路径。我总是得到: 无法从状态“ home”解析“ .where” 要么 无法从状态“家”解析“ wizard.where” 要么 无法从状态“ home”解析“ wizard.where @” …即使在中效果很

  • 问题内容: 我问一个与此问题类似的问题:UI路由器有条件的ui视图?,但我的情况要复杂一些,似乎无法获得所提供的答案。 基本上,我可以使用两种非常不同的方式呈现url,具体取决于url指向的实体的类型。 这是我目前正在尝试的 我设置了一个解析程序,以从一个静态服务中获取实际实体。直到我根据类型实际到达transitionTo为止,所有事情似乎都在起作用。 转换似乎可以正常工作,但解析会重新触发并且

  • 问题内容: 我有一个抽象的父视图,该视图旨在与其嵌套视图共享一个控制器。 路由工作正常。 问题是,当我从其中一个嵌套视图更新变量时,更改未反映在视图中。当我从父视图执行相同操作时,它可以正常工作。这种情况不需要。 我的猜测是正在为每个视图创建一个新的实例,但是我不确定为什么或如何修复它。 问题答案: 这里的问题与以下问答有关:如何在angularjs ui-router中的状态之间共享$scope

  • 问题内容: 我有如下配置: 玉器主锉 因此,模块将填充到占位符中。但是问题是,我在模板中还有2个命名视图。模板如下所示: leftSidePaneModule.html 如何使模块和在被填充到上述占位? 我试过了, 尝试次数:2 两者都不起作用。 你怎么做呢? 谢谢! 问题答案: 解决方案可在此处找到:视图名称-相对名称与绝对名称。引用: 在幕后,每个视图都被分配一个遵循的方案的绝对名称,其中指令