web-dev-qa-db-ja.com

ionicのタブにコンテンツが表示されていません

コンテンツを表示しようとしています。ここにカスタムコードをカスタムテンプレートファイルに手動で追加しました。

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

タブは表示されますが、コンテンツは表示されません。そして、ionicのサンプルアプリタブに従うと、これは可能です。しかし、1つ以上必要です。

ここにコンテンツを表示できますか？.

angularjsionic-frameworkionic
11
Hitu Bansal

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>

テンプレートを使用して、同じファイル内に（例のように）簡単に追加できます。テンプレートは、ルートのtemplateUrlを使用して、マークアップ内のテンプレートのIDに関連付けられます。

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

ionicにタブを設定する方法の詳細については、これもあります post 。

8
mtpultz

例を詳しく調べると、各タブエントリにはion-nav-viewが含まれており、各nav-viewは実際にはion-viewとその内容を指定するion-contentです。

コードでは、タブ要素はion-content内にラップされていますが、これは実際には逆の方法です。

これは少し単純化された例です http://codepen.io/anon/pen/XbOLzY

3
JuniorDev