Question

我是AngularJS的新手。到目前为止我看到的所有示例都在基本index.html文件中有sidemenu 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'
          }
      }
  })

我在浏览器控制台中看到了部分文件＆＃39; templates / menu-left.html＆＃39;正在加载。此外，如果我导航到我的应用程序中的＃/ menu-left URL，则会出现菜单。但它应该出现在那个地方的所有页面上。

谢谢，

Answer 1

您不需要创建单独的路由/状态来使用外部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调用以获取外部模板。可能会模仿＆＃34;模块化＆＃34;对于导航栏，侧边菜单等的HTML，您可能最好将整个Web应用程序中可用的核心功能代码放在单个HTML文件中，以避免额外HTTP请求的成本。

Answer 2

您可以使用ng-include代替abstract parent state，并将子模板注入父模板中的ion-nav-view。

.state('menu', {
  url: '/menu',
  abstract: true,
  templateUrl: 'templates/menu.html'
})

.state('menu.child', {
  url: '/child',
  views: {
    'menuContent': {
      templateUrl: 'templates/child.html'
    }
  }
});

HTML文件： menu.html

 <ion-side-menus>
      <ion-side-menu>
        <ion-nav-bar>
           <!-- ion nav buttons -->
        </ion-nav-bar>
        <ion-nav-view name="menuContent"></ion-nav-view>
      </ion-side-menu>
    </ion-side-menus>

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

2 个答案: