Angular - Dynamic Dashbaord取决于用户

时间:2016-04-25 18:51:28

标签: html angularjs

我有3种类型的用户:培训师,运动员,粉丝。

每个1都在同一页面上登录。但登录后我想显示不同的仪表板取决于用户角色

Rignt现在我尝试做像

这样的事情
.state('trainerDashboard', {
               templateUrl: '/App/ControlPanel/views/templates/trainerDashboard.html',
               abstract: true,
           })

state('login', {
                url: '/login',

                templateUrl: '/App/ControlPanel/views/dashboard/dashboard.html',
                parent: 'trainerDashboard',
                controller: 'DashboardCtrl',
                controllerAs: 'vm',
                data: {
                    pageTitle: 'Login_Title',
                    login: true,
                    defaultState: 'users'
                },
                resolve: stateResolve
            })

但我不知道如何在这里设置不同的父母

任何想法?

谢谢

1 个答案:

答案 0 :(得分:2)

在你的控制器中你可以定义像这样的嵌套状态

vertical-align: center;

在您的控制器文件中,您可以使用Angular UI路由器提供的$ state.go()函数将用户重定向到基于用户类型的状态,例如:

.state('dashboard', {
        templateUrl: "/App/ControlPanel/views/templates/dashboard.html"
        controller: ** controllerName ** //your controller name
    })
    .state('dashboard.trainer', {
            url: "/trainer",
            templateUrl: "/App/ControlPanel/views/templates/trainer.html"
        }
        .state('dashboard.sportsman', {
                url: "/sportsman",
                templateUrl: "/App/ControlPanel/views/templates/sportsman.html"
            }
            .state('dashboard.fan', {
                    url: "/fan",
                    templateUrl: "/App/ControlPanel/views/templates/fan.html"
                }

在您的dashboard.html文件中,您必须使用ui-view绑定div,如下所示

if(userType == 'trainer'){
    $state.go(dashboard.trainer)
}
else if(userType == 'sportsman'){
    $state.go(dashboard.sportsman)
}
else if(userType == 'fan'){
    $state.go(dashboard.fan)
}

希望它有所帮助 干杯