Ionic side menu and tabs with nested views: content of tab nested views not showing

Question

I am new to both AngularJS and Ionic.

I am creating an app that has both a sidemenu and tabs inside one of the menu's options. The tabs should render its content by using a nested view, so no plain HTML here.

I can navigate between the sidemenu options and all works and gets rendered properly. The problem comes when I enter the menu option that hosts the tabs.

While the tabs navigation panel renders properly and I can navigate between the tabs, somehow the tab's content is created but remains invisible. If I do an ionic serve and inspect the generated HTML with Firebug or similar I can see the content of the nested view generated. It is just I do not see it on the browser. This happens to me in both Chromium and Firefox so browser should not be the problem. Same happens when trying with the Android emulator.

I first thought of a routing problem, but that does not make too much sense to me, since the content is generated (just invisible).

I have created a Plunkr with my code reduced to the minimum in order to reproduce the problem. Anyway, my (relevant) code is as following:

index.html

app.js

angular.module('starter', ['ionic', 'starter.controllers'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }
  });
})

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

  .state('app', {
    url: "/app",
    abstract: true,
    templateUrl: "menu.html",
    controller: 'AppCtrl'
  })

  .state('app.questionsAnswers', {
    url: "/questionsAnswers",
//    abstract: true,
    views: {
      'menuContent': {
        templateUrl: "questionsAnswers.html"//,
//        controller: 'questionsAnswersCtrl'
      }
    }
  })

  .state('app.questionsAnswers.recent', {
    url: "/recent",
    views: {
      'recent-questions': {
        templateUrl: "recentQuestionsAnswers.html",
        controller: 'recentQuestionsAnswersCtrl'
      }
    }
  })

  .state('app.questionsAnswers.mostVoted', {
    url: "/mostVoted",
    views: {
      'most-voted-questions': {
        templateUrl: "mostVotedQuestionsAnswers.html",
        controller: 'mostVotedQuestionsAnswersCtrl'
      }
    }
  })

  .state('app.questionsAnswers.random', {
    url: "/random",
    views: {
      'random-questions': {
        templateUrl: "randomQuestionsAnswers.html",
        controller: 'randomQuestionsAnswersCtrl'
      }
    }
  })


    .state('app.foo', {
      url: "/foo",
      views: {
        'menuContent': {
          templateUrl: "foo.html",
          controller: 'fooCtrl'
        }
      }
    });
  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/app/foo');
});

menu.html


  
    
      
      

      
        
      
    
    
  

  
    
      Menu
    
    
      
                
          Questions & Answers
        
        
          Foo

questionsAnswers.html


  
    Questions & Answers

The rest of the HTML files in my SSCCE are just plain views of the type:


  
    
      foo content

The controllers.js is not really relevant in the example since all controllers do basically nothing (of course in the real app they all have their own functionality).

I have read a lot of questions and answers both in SO and other webs, but can not seem to find whatever I am doing wrong. Question is: why does the nested view in my tabs render but remain invisible?

LeftyX · Accepted Answer

Your ion-view Questions & Answers (questionAnswers.html) cannot contain a element cause you're already setting the in each sub-view.

EX:


  
    Most voted Questions

So your questionAnswers.html should be:

This is the plunker.

Ionic side menu and tabs with nested views: content of tab nested views not showing

Answers (1)

Related Questions