个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-30 16:29:50 25 4
gpt4 key购买 nike

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

  • 学生
  • 教师

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

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

index.html

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

学生菜单.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

教师菜单.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

enter image description here

感谢清晰的解释。

最佳答案

请考虑阅读有关在您的精彩应用程序中包含 ui-router 的内容，并了解 templateProvider 的用法。

一旦你完成了上面的事情，你所需要的就是:

  1. 创建 Service 将具有 getCurrentUserStatus() 应该从加载的数据中获取用户在您系统中的状态

  2. 根据状态配置您的 child views: { 'menu': { ... } } with

    //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()];
    },
    ...

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

附言这允许您扩展变量模板列表，除非您的想象力会空虚 :D

附言新手方式 - 每个 View 上的很多 ng-include 和 ng-if 将根据查看器进行更改。

关于javascript - Angular.js - 如何加载不同的菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33489551/

25 4 0
文章推荐： c - C 中的 if 语句后 while 循环不继续
文章推荐： 计算 I/O 模型的值
文章推荐： c - 在C中隐藏应用程序窗口
文章推荐： DataTables rowReordering (ASP.Net MVC) 期间的 JavaScript 运行时错误