Ionic Framework - Angulaire html inclure

Je suis en train de construire une application avec l'Ionic Framework. Je suis à l'aide d'un onglet de 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"
            }
        }
    })....

D'abord, j'ai écrit tout le code dans 1 fichier html, puis pour une meilleure surveillance, je voulais l'utiliser html inclure:

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

Maintenant j'ai le problème que la barre de titre du site ne fonctionne plus. Il ne veut pas afficher le titre et le contenu html est de la pose sur le dessus de la barre.
Peut-être que c'est parce qu'en raison de l'inclure dans une balise div maintenant?

Comment puis-je résoudre ce problème?

  • Avez-vous pris un regard sur les onglets modèle de ionique? Il illustre parfaitement la façon de traiter avec les onglets et les différents fichiers html. Tapez simplement ionic starter myApp tabs et avoir un regard sur les fichiers générés.
  • omg, je suis stupide... merci! C'est dans le code déjà..
  • J'ai déménagé mes modèles à l' /modèle de dossier et enlevé le <script> balises avec les includes du corps
InformationsquelleAutor temporalis | 2015-06-07