Question

131

Ionic Framework - Angular html include

rated 0 times [ 136] [ 5] / answers: 1 / hits: 19861 / 9 Years ago, sun, june 7, 2015, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

sheylap

Add To Favorites

Follow

Total Points: 141

Total Questions: 99

Total Answers: 99

Location: Sint Maarten

Member since Tue, Mar 29, 2022

2 Years ago

answered 9 Years ago jameson · Accepted Answer

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.