Question

我目前正在创建一个左侧有侧边栏的网站using the Ionic framework。用户可以单击某个项目以转到该网站的另一个页面。现在我必须将侧边栏的代码复制到每个页面，这是无用的，而不是去的方式。

所以我的问题是，是否可以在另一页的特定部分“嵌入”html页面。例如，我可以让我的侧边栏“静态”并加载到特定div中的login.html文件中。拥有一个包含所有页面的html文件将非常难以维护和组织。

这有可能以某种方式吗？

编辑：根据要求，我正在添加我已经拥有的最相关的代码

<ion-side-menus>

<!-- Main page-->
<ion-side-menu-content>
    <ion-header-bar class="bar-dark">

        <!-- Knop toggleSidebar -->
        <button class="button button-icon" ng-click="triggerSidebar()">
            <i class="icon ion-navicon"></i>
        </button>

        <h1 class="title">Proof of concept</h1>
    </ion-header-bar>
    <ion-content>
        <div class="row">
            <div class="col" col-50>5 + 8 = </div>
            <div class="col" col-25><input type="number" placeholder="13"></div>
            <div class="col" col-25><button class="button button-small">Controleer</button></div>
        </div>
    </ion-content>
</ion-side-menu-content>

<!-- End Main page -->


<!-- Sidebar -->

<ion-side-menu side="left">
    <ion-header-bar class="bar-dark">
        <h1 class="title">Sidebar</h1>
    </ion-header-bar>
    <ion-content>
            <div class="item item-divider">Settings</div>
            <a class="item" href="profiles.html"><i class="icon ion-person"></i> Profiles<span class="item-note">Freddy</span></a>
            <a class="item" href="#"><i class="icon ion-information-circled"></i> About</a>
            <a class="item" href="#"><i class="icon ion-android-mail"></i> Contact</a>
        </div>
    </ion-content>
</ion-side-menu>

<!-- End sidebar -->

我想要达到的目标是，当有人点击“个人资料”选项时，主页面的内容会根据从另一个html文件中获取的内容进行切换

Answer 1

您可以使用角度UI路由解决它：

   $stateProvider
        .state("menu", {
            url: "/menu",
            abstract: true,
            templateUrl: "views/menu.html"
        })
        .state('menu.combinedPage1', {
            url: '/combinedPage1',
            views: {
                "EmbeddedContent": {
                    templateUrl: "views/embedded1.html",
                    controller: "EmbeddedController1"
                }
            }
        })
        .state('menu.combinedPage2', {
            url: '/combinedPage2',
            views: {
                "EmbeddedContent": {
                    templateUrl: "views/embedded2.html",
                    controller: "EmbeddedController2"
                }
            }
        })

这里＆＃34;菜单＆＃34;是抽象状态，包含由路由器控制的嵌入式视图。

<ion-side-menus>
    <ion-side-menu-content>

        <ion-nav-view name="EmbeddedContent"></ion-nav-view>

    </ion-side-menu-content>
</ion-side-menus>

Answer 2

你可以使用框架:)只用html，下面的代码将帮助

＆＃13;

<html>
  <head>
    <title>Multiple Pages</title>
  </head>
  <FRAMESET cols="20%, 80%">
        <FRAME SRC="sidebar.html">
        <FRAME SRC="content.html">
        
  </FRAMESET>
</html>

＆＃13;

＆＃13; 你也可以像这样

使用php

＆＃13;

#side_bar{
  background-color: red;
  width: 200px;
  height: 100%;
  float: left;
  }

＆＃13;

<div id="side_bar">
  <?php
include_once('sidebar.html');
?>
</div>

＆＃13;

Answer 3

您可以点击＆＃34;个人资料＆＃34;它转到另一个页面，然后你可以将侧边栏的代码放在php文档中，并使用php include标签在新页面中显示它。请参阅以下示例：

sidebarCode.php：

<ion-side-menu side="left">
<ion-header-bar class="bar-dark">
    <h1 class="title">Sidebar</h1>
</ion-header-bar>
<ion-content>
        <div class="item item-divider">Settings</div>
        <a class="item" href="profiles.html"><i class="icon ion-person"></i> Profiles<span class="item-note">Freddy</span></a>
        <a class="item" href="#"><i class="icon ion-information-circled"></i> About</a>
        <a class="item" href="#"><i class="icon ion-android-mail"></i> Contact</a>
    </div>
</ion-content>

新页面：

<!--Specific Did You Want-->
<div>
   <?php include 'sidebarCode.php';?>
</div>

Answer 4

在<ion-side-menu-content>内，您可以通过ui路由器加载脚本。因此，您可以执行的操作是，当用户点击菜单项时，您使用$templatecache将页面HTML存储为模板，然后只需在<ion-side-menu-content>内重新加载您的视图即可完成工作！

使用Ionic框架将html文件的内容嵌入到另一个html页面？

4 个答案: