Using tabs with Nested Views


#1

Hi!

I need create a view with tabs but using nesteds views:

For example:

touch tab “info” and render info.html in ui-view
touch tab “promotions” and render promotions.html in ui.view

My code:

// item layout
    .state('item', { 
          url: '/item',
          abstract: true,
          templateUrl: 'templates/item.html',
        })
            // setup an abstract state for the tabs directive
            .state('item.tab', {
              url: '/tab',
              abstract: true,
              templateUrl: 'templates/tabs.html'
            })
       
                // Promotions Tab
                .state('item.tab.promotions', {
                  url: '/promotions',
                  views: {
                    'item': {
                        templateUrl: 'templates/promotions.html',
                        controller: 'PromotionsController'
                    }
                  }
                })
    
                // Info Tab
                .state('item.tab.info', {
                  url: '/info',
                  views: {
                    'item': {
                        templateUrl: 'templates/info.html',
                        controller: 'InfoController'
                    }
                  }
                })

item.html:

<ion-view has-tabs="true">    

 ...
 
  <ion-content padding="true" ng-controller="ItemController">

      <div ui-view name="item"></div>

     <script id="promotions.html" type="text/ng-template"></script>
     <script id="info.html" type="text/ng-template"></script>
    
  </ion-content>

  <ion-nav-view></ion-nav-view>

</ion-view>

I geting empty result:

Thanks!


#2

I resolved this issue :smile:

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

            // Promotions Tab
            .state('item.tab.promotions', {
              url: '/promotions',
              views: {
                'item-promotions': {
                    templateUrl: 'templates/item-promotions.html',
                    controller: 'PromotionsController'
                }
              }
            })

            // Info Tab
            .state('item.tab.info', {
              url: '/info',
              views: {
                'item-info': {
                    templateUrl: 'templates/item-info.html',
                    controller: 'InfoController'
                }
              }
            })

view:

    <ion-view>    
  <ion-header-bar align-title="centerr" class="bar-subheader bar-assertive">
    <button class="button button-icon icon ion-chevron-left"></button>
    <h1 class="title">{{ item.title }}</h1>
    <button class="button button-icon icon ion-ios7-star"></button>
  </ion-header-bar>

  <!-- render subviews -->
  <ion-nav-view></ion-nav-view>

</ion-view>

Now this work :smile:

Example: http://codepen.io/anon/pen/GwpIc?editors=101