Ionic Framework - Angular html include

javascript angularjs html ionic-framework

19,383

Solution 1

This is old, but the best solution was not posted. I found the solution while I still had this open so I figured I'd contribute in case anyone else finds this. You can simply use the ng-include directive as it's own tag

<ion-slide-box>
                <ion-slide>
                    <ng-include src="'templates/slide1.html'"></ng-include>
                </ion-slide>
                <ion-slide>
                    <ng-include src="'templates/slide2.html'"></ng-include>
                </ion-slide>
                <ion-slide>
                    <ng-include src="'templates/slide3.html'"></ng-include>
                </ion-slide>
                <ion-slide>
                    <ng-include src="'templates/slide4.html'"></ng-include>
                </ion-slide>
</ion-slide-box>

No need for ion-view in each slide.

Solution 2

I solved the issue by having <div ng-include...> inside <ion-view> within <ion-tab>. Here is the structure you may have to try

<ion-pane>
        <ion-tabs>
            <ion-tab title="Tab 1"...>
                <ion-view>
                    <div ng-include src="'templates/tab1.html'"></div>
                </ion-view>
            </ion-tab>
            <ion-tab title="Tab 2"... >
                <ion-view>
                    <div ng-include src="'templates/tab2.html'"></div>
                </ion-view>
            </ion-tab>
        </ion-tabs>
    </ion-pane>

I encapsulated the templates (tab1.html..) within <ion-content> templates/tab1.html

<ion-content>
   <!--Your Template Content Goes here-->
</ion-content>

This structure works like a charm for me.

http://forum.ionicframework.com/t/tabs-and-ng-include/7863/4?u=kousikraj

19,383

Author by

temporalis

Updated on June 17, 2022

Comments

temporalis about 2 years

I'm building an app with the Ionic Framework. I'm using a tab navigation.

angular.module('myapp', ['ionic'])

.config(function ($stateProvider, $urlRouterProvider) {

$stateProvider
    .state('tabs', {
        url: "/tab",
        abstract: true,
        templateUrl: "templates/tabs.html"
    })
    .state('tabs.home', {
        url: "/home",
        views: {
            'home-tab': {
                templateUrl: "templates/home.html",
                controller: 'HomeTabCtrl'
            }
        }
    })
    .state('tabs.news', {
        url: "/news",
        views: {
            'news-tab': {
                templateUrl: "templates/news.html"
            }
        }
    })....

First I wrote all code in 1 html file, then for better oversight I wanted to use html include:

<body>
<!-- Layout Setup -->
<ion-nav-bar class="bar-app"></ion-nav-bar>
<ion-nav-view></ion-nav-view>

<script id="templates/tabs.html" type="text/ng-template">
    <div ng-include="'sub/tabs.html'"></div>
</script>

<script id="templates/home.html" type="text/ng-template">
    <div ng-include="'sub/home.html'"></div>
</script>

<script id="templates/news.html" type="text/ng-template">
    <div ng-include="'sub/news.html'"></div>
</script>
....

home.html:

<ion-view view-title="" hide-nav-bar="true">
    <ion-content class="padding app-home" scroll="false">
        <div class="app-image">
            <img class="full-image" src="img/app-logo.svg">
        </div>
        <div class="row app-home-buttons">
            <div class="col">
                <a href="#/tab/news">
                    <button class="button button-balanced button-block icon-top"><i class='icon ion-ios-paper-outline'></i><span>News</span>
                    </button>
                </a>
            </div>
    </ion-content>
</ion-view>

news.html:

<ion-view view-title="News" ng-controller="NewsRefreshCtrl">
    <ion-content class="">
        <ion-refresher on-refresh="doRefresh()">

        </ion-refresher>
        <div class="list">

            <a class="item item-thumbnail-left item-text-wrap" href="#">
                <img src="img/tile-icon.png">
                <h2>Lorem consetetur sadipscing</h2>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At v</p>
            </a>
            </a>

        </div>

    </ion-content>
</ion-view>

Now I have the problem that the bar with the site title isn't working anymore. It doesn't show the title and the included html content is laying on top under the bar. Maybe thats because due to the include it's in a div tag now?

How can I solve this?