个人中心
gpt4 book ai didi

javascript - AngularJS - 如何将侧边菜单 html 代码放入外部模板文件

转载 作者：行者123 更新时间：2023-11-30 00:24:42 25 4
gpt4 key购买 nike

我是 AngularJS 的新手。到目前为止，我看到的所有示例都在基本 index.html 文件中有侧边菜单 html 代码，而不是在模板 html 部分中。我想将 sidemenu html(因为它可能会变大)移动到它自己的模板文件中。

到目前为止 index.html 有:

...
<ion-side-menu side="left">
        <div ui-view='menu-left'></div>
</ion-side-menu>
...

然后在我的 app.js 中(我知道这是错误的):

$stateProvider
  .state('menu-left', {
      url: '/menu-left',
      views: {
          'menu-left': {
              templateUrl: 'templates/menu-left.html'
          }
      }
  })

我在浏览器控制台中看到正在加载部分文件“templates/menu-left.html”。此外，如果我在我的应用程序中导航到 ..#/menu-left URL，则会出现菜单。但是它应该出现在该位置的所有页面上。

谢谢，

最佳答案

您无需创建单独的路由/状态即可使用外部 HTML 模板。正如@charlietfl 所建议的，您可以使用 ng-include 来引用外部模板。

在你的 index.html 中添加这一行

<body> 
...
<!-- Note the single quotes within double quotes --> 
<div ng-include="'menu-left.html'"></div>
... 
</body>

ngInclude documentation

menu-left.html 然后可以有侧边菜单 HTML。

请注意，使用 ng-include 会导致额外的 HTTP 调用来获取外部模板。尽管“模块化”导航栏、侧边菜单等的 HTML 可能很诱人，但您最好将整个 Web 应用程序可用的核心功能代码放在一个 HTML 文件中，以避免额外的 HTTP 请求的成本。

关于javascript - AngularJS - 如何将侧边菜单 html 代码放入外部模板文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31867273/

25 4 0
文章推荐： 返回 NaN 的 javascript 变量
文章推荐： java - 安卓工作室 : Making Action Bar text scrollable
文章推荐： android - 谷歌分析 - Activity 代码参数
文章推荐： php - 我可以使用 php 数组插入不同主机上的 mysql 数据库吗？