current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.4 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 3 down vote favorite
1

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?

share|improve this question
    
Have you taken a look at the tabs template of ionic? It shows perfectly how to deal with tabs and different html files. Just type ionic starter myApp tabs and have a look at the generated files. – QueryLars Jun 8 '15 at 6:43
    
omg, I'm stupid... thanks! It was in the code already.. – temporalis Jun 8 '15 at 7:20
    
I moved my templates to the /template folder and removed the <script> tags with the includes from the body – temporalis Jun 8 '15 at 7:21
up vote 6 down vote

I solved the issue by having inside within . 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 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

share|improve this answer
    
This way works for me too – bklups Oct 14 at 9:32
up vote -1 down vote

Works like this: -template .html files in /templates folder, remove the script tags

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
    <title></title>
    <link data-require="[email protected]" data-semver="1.0.0-beta.1" rel="stylesheet" href="http://code.ionicframework.com/1.0.0-beta.1/css/ionic.css" />
    <link rel="stylesheet" href="style.css" />
    <script data-require="[email protected]" data-semver="1.0.0-beta.1" src="http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.js"></script>
    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>
    <script src="app.js"></script>
    <script src="controllers.js"></script>
    <script src="services.js"></script>
  </head>

  <body ng-app="starter" animation="slide-left-right-ios7">
    <!-- 
      The nav bar that will be updated as we navigate between views.
    -->
    <ion-nav-bar class="bar-stable nav-title-slide-ios7">
      <ion-nav-back-button class="button-icon icon ion-chevron-left">
        Back
      </ion-nav-back-button>
    </ion-nav-bar>
    <!-- 
      The views will be rendered in the <ion-nav-view> directive below
      Templates are in the /templates folder (but you could also
      have templates inline in this html file if you'd like).
    -->
    <ion-nav-view></ion-nav-view>
  </body>

</html>

App.js:

// Ionic Starter App, v0.9.20

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'starter.services' is found in services.js
// 'starter.controllers' is found in controllers.js
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    StatusBar.styleDefault();
  });
})

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

  // Ionic uses AngularUI Router which uses the concept of states
  // Learn more here: https://github.com/angular-ui/ui-router
  // Set up the various states which the app can be in.
  // Each state's controller can be found in controllers.js
  $stateProvider

    // setup an abstract state for the tabs directive
    .state('tab', {
      url: "/tab",
      abstract: true,
      templateUrl: "templates/tabs.html"
    })

    // Each tab has its own nav history stack:

    .state('tab.dash', {
      url: '/dash',
      views: {
        'tab-dash': {
          templateUrl: 'templates/tab-dash.html',
          controller: 'DashCtrl'
        }
      }
    })

    .state('tab.friends', {
      url: '/friends',
      views: {
        'tab-friends': {
          templateUrl: 'templates/tab-friends.html',
          controller: 'FriendsCtrl'
        }
      }
    })
    .state('tab.friend-detail', {
      url: '/friend/:friendId',
      views: {
        'tab-friends': {
          templateUrl: 'templates/friend-detail.html',
          controller: 'FriendDetailCtrl'
        }
      }
    })

    .state('tab.account', {
      url: '/account',
      views: {
        'tab-account': {
          templateUrl: 'templates/tab-account.html',
          controller: 'AccountCtrl'
        }
      }
    })

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/tab/dash');

});
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.