Question

我开始将jquery迁移到angular应用程序，但它让我有点复杂。在登录任何用户时，我需要知道是否有人可以帮助我作为路由和加载控制器。有两种类型的用户

学生
教师

每个菜单都有不同的菜单，而菜单又有不同的html页面。根据用户输入的角色，然后加载特定菜单。

使用jQuery load事件，并更改div内更改的内容。我想知道如何使用angular执行此过程。

的index.html

<html>
  <head> Files ... </head>
  <body>
    <div id="container"></div>
  </body>
</html>

学生menu.html

<div>
  <div>option-1</div>
  <div>option-2</div>
  <div>option-3</div>
  <div>option-N</div>
 </div>

生的页面

option-1.html
option-2.html
option-3.html
option-N.html

教师menu.html

<div>
  <div>option-1</div>
  <div>option-2</div>
  <div>option-3</div>
  <div>option-N</div>
 </div>

教师-页

option-1.html
option-2.html
option-3.html
option-N.html

欣赏明确的解释。

Answer 1

请考虑阅读有关在您的应用程序中包含ui-router并了解templateProvider用法的信息。

只要你完成上述所有事情，你所需要的就是：

创建Service，其中getCurrentUserStatus()应从已加载的数据中获取有关用户在系统中的状态

根据状态配置您的孩子views: { 'menu': { ... } }

//somewhere above
const TEMP = {
    user: 'path/to/file.tpl.html',
    admin: 'path/to/admin.tpl.html'
}

//somewhere in view configuretion
...,
templateProvider (AuthService) {
    return TEMP[AuthService.getCurrentUserStatus()];
},
...

使用与选择所需模板完全相同的方法创建所有其他页面。

P.S。这允许您扩展变量模板列表，除非您的想象力将为空：D

P.P.S。 Noobs方式 - 每个视图上ng-include的{{1}}很多都会根据观看者进行更改。

Angular.js - 如何加载不同的菜单

1 个答案: