Le schede in ionico non mostrano contenuto

Question

Sto tentando di mostrare il contenuto. Ho aggiunto qui il codice personalizzato manualmente sul file modello personalizzato.

<ion-content> 


<ion-tabs class="tabs-positive tabs-icon-only"> 

    <ion-tab title="Home" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline"> 
    My Content here 
    </ion-tab> 

    <ion-tab title="About" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline"> 
    My Content here 1 
    </ion-tab> 

    <ion-tab title="Settings" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline"> 
    My Content here 3 
    </ion-tab> 

</ion-tabs> 
    </ion-content> 
</ion-view> 

ho preso esempio di codice da qui

http://ionicframework.com/docs/api/directive/ionTabs/

Sono in grado di vedere le schede, ma non di contenuti. E sì, se seguo la scheda app di esempio per ionico sono in grado di farlo. Ma ho bisogno di sopra.

Possiamo mostrare il contenuto qui.

Answer 1

Devi usare al fine di caricare il contenuto all'interno della direttiva schede. Lo stato del percorso utilizza il nome della vista per posizionare il contenuto che risiederà all'interno della scheda.

// Notice the referenced view is "home-tab" 
.state('tabs.home', { 
    url: "/home", 
    views: { 
    'home-tab': { 
     templateUrl: "templates/home.html", 
     controller: 'HomeTabCtrl' 
    } 
    } 
}) 

// Which correlates to the name of the view, which is also "home-tab" 
<ion-tab title="Home" icon="ion-home" href="#/tab/home"> 
    <ion-nav-view name="home-tab"></ion-nav-view> 
</ion-tab> 

È possibile aggiungere facilmente all'interno dello stesso file (come nell'esempio) utilizzando un modello, che correla con il TemplateURL del percorso per l'id del modello nella marcatura:

<script id="templates/home.html" type="text/ng-template"> 
    <ion-view view-title="Home"> 
    <ion-content class="padding"> 
     <p> 
     // Your content 
     </p> 
    </ion-content> 
    </ion-view> 
</script> 

Per ulteriori informazioni sulla configurazione di schede in ionico, è disponibile anche questo post.

Answer 2

Se si studia l'esempio da vicino vedrete che, ogni voce scheda contiene un ion-nav-view ed ogni nav-view è in realtà un ion-view con ion-content che specificano il contenuto.

Nel codice, gli elementi di tabulazione sono racchiusi all'interno di uno ion-content che è in realtà il contrario.

Ecco un esempio leggermente semplificata http://codepen.io/anon/pen/XbOLzY