Вложения в ионной форме не отображаются

Я пытаюсь показать контент. Я добавил специальный код здесь вручную в пользовательский файл шаблона.

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

Я взял пример кода здесь

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

Я могу видеть вкладки, но не контент. И да, если я следую примеру приложения приложения для ионных я могу это сделать. Но мне нужно больше одного.

Можем ли мы показать контент здесь.

Ответы

Ответ 1

Вы должны использовать представление для загрузки содержимого в директиве tabs. Состояние маршрута использует имя представления для размещения содержимого, которое будет находиться на вкладке.

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

Вы можете легко добавить его в один и тот же файл (например, в примере) с помощью шаблона, который коррелирует с использованием шаблона url маршрута с идентификатором шаблона в разметке:

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

Для получения дополнительной информации о настройке вкладок в ионном файле также см. .

Ответ 2

Если вы внимательно изучите пример, вы увидите, что каждая вкладка содержит ion-nav-view, и каждый nav-view на самом деле является ion-view с ion-content, который указывает его содержимое.

В вашем коде элементы табуляции обернуты внутри ion-content, что на самом деле является обратным.

Вот несколько упрощенный пример http://codepen.io/anon/pen/XbOLzY