使用Ionic框架将html文件的内容嵌入到另一个html页面？ [英] Embed content of a html file to another html page using the Ionic framework?

问题描述

我目前正在使用左侧边栏创建一个网站使用Ionic框架。用户可以点击一个项目转到该网站的另一个页面。
现在我必须将侧边栏的代码复制到每个页面，这是无用的，而不是要走的路。

所以我的问题是，如果有可能在另一个页面的特定部分嵌入一个html页面。
例如，我可以让我的边栏静态，并加载到特定div中的login.html文件中。
所有页面都有一个html文件将很难维护和组织。

这是可能的某种方式吗？

编辑：在请求时，我添加了我已经拥有的最相关的代码

 <离子侧菜单> 
 
 <！ -   - 首页 - > 
< ion-side-menu-content> 
< ion-header-bar class =bar-dark> 
 
 <！ -  Knop toggleSidebar  - > 
< button class =button button-iconng-click =triggerSidebar（）> 
< i class =icon ion-navicon>< / i> 
< / button> 
 
< h1 class =title>概念验证< / h1> 
< / ion-header-bar> 
< ion-content> 
< div class =row> 
< div class =colcol-50> 5 + 8 =< / div> 
< div class =colcol-25>< input type =numberplaceholder =13>< / div> 
< div class =colcol-25>< button class =button button-small> Controleer< / button>< / div> 
< / div> 
< / ion-content> 
< / ion-side-menu-content> 
 
 <！ -   - 结束主页 - > 
 
 
 <！ -   - 补充工具栏 - > 
 
< ion-side-menu side =left> 
< ion-header-bar class =bar-dark> 
< h1 class =title>侧边栏< / h1> 
< / ion-header-bar> 
< ion-content> 
< div class =item item-divider>设置< / div> 
< a class =itemhref =profiles.html>< i class =icon ion-person>< / i> Profiles< span class =item-note> Freddy< / span>< / a> 
< a class =itemhref =＃>< i class =icon ion-information-circled>< / i>关于< / A> 
< a class =itemhref =＃>< i class =icon ion-android-mail>< / i>联系与LT; / A> 
< / div> 
< / ion-content> 
< / ion-side-menu> 
 
 <！ -   - 侧边栏 - > 
  

我正在尝试当有人点击个人档案选项时，主页面的内容会与另一个html文件中的内容切换。 解决方案

  $ 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： {
嵌入式内容：{
 templateUrl：views / embedded2.html，
 controller：EmbeddedController2
} 
} 
}）
  

这里menu是抽象状态，包含由路由器控制的嵌入式视图。

 <离子侧菜单> 
< ion-side-menu-content> 
 
< ion-nav-view name =EmbeddedContent>< / ion-nav-view> 
 
< / ion-side-menu-content> 
< / ion-side-menus> 
  

I"m currently creating a website using the Ionic framework that has a sidebar on the left side. Users can click on an item to go to another page of the website. Now I have to copy the code of the sidebar to every page and that's useless and not the way to go.

So my question is if it is possible to "embed" a html page in a specific section of another page. For example I could have my sidebar be "static" and load in a login.html file in a specific div. And having one html file with all the pages would be very hard to maintain and organise.

Is that possible in some kind of way?

EDIT: As requesting, I'm adding the most relevant code I already have

<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 -->

What I'm trying to reach is, when someone clicks on the "profiles" option, the content of the main page gets switched with content taken from another html file

解决方案

You can solve it using angular UI-routing:

   $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"
                }
            }
        })

Here "menu" is abstract state and contains embedded views that controlled by router.

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

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

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

这篇关于使用Ionic框架将html文件的内容嵌入到另一个html页面？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！