8

Ionic は初めてですが、試してみたいと思ってから長い時間が経ちました。私はただ遊んでいるだけなので、完全な概念を理解していない可能性があります。

下部に 3 つのタブがあり、3 つのタブすべてに設定アイコンがある単純なアプリケーションを作成しようとしています。そのアイコンをクリックすると、タブが非表示になり、設定画面が表示されるはずです。

ユーザーがコンテンツを失うことを望まないので、すべてのビューはグローバル ビューから継承します。

angular.module('app', ['ionic', 'debug']).config(function($stateProvider, $urlRouterProvider) {

  $stateProvider
      .state('app', {
        url: "/app",
        abstract: true,
        controller: 'AppController',
        templateUrl: "ui/modules/tabs/view.html"
      })
      .state('app.compose-text', {
        url: '/text',
        views: {
          'compose-text': {
            templateUrl: 'ui/modules/text-composer/view.html'
          }
        }
      })
      .state('app.compose-draw', {
        url: '/draw',
        views: {
          'compose-draw': {
            templateUrl: 'ui/modules/draw-composer/view.html'
          }
        }
      })
      .state('app.compose-photo', {
        url: '/photo',
        views: {
          'compose-photo': {
            templateUrl: 'ui/modules/photo-composer/view.html'
          }
        }
      })
      .state('app.settings', {
        url: '/settings',
        views: {
          'settings': {
            controller: 'ui/modules/settings/ctrl.js',
            templateUrl: 'ui/modules/settings/view.html'
          }
        }
      });

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/app/text');
});

angular.module('app').run(function($rootScope) {
});

次に、tabs/view次のようになります。

<ion-nav-view name="settings"></ion-nav-view>

<ion-tabs class="tabs-assertive tabs-icon-only">
  <ion-tab title="Text" icon="icon ion-ios7-compose-outline" href="#/app/text">
    <ion-nav-view name="compose-text"></ion-nav-view>
  </ion-tab>

  <ion-tab title="Draw" icon="icon ion-edit" href="#/app/draw">
    <ion-nav-view name="compose-draw"></ion-nav-view>
  </ion-tab>

  <ion-tab title="Photo" icon="icon ion-ios7-camera-outline" href="#/app/photo">
    <ion-nav-view name="compose-photo"></ion-nav-view>
  </ion-tab>
</ion-tabs>

そして、ビューの1つ:

<ion-view title="Example" class="slide-left-right">
  <ion-nav-buttons side="left">
    <a class="button button-icon button-clear ion-ios7-gear-outline" href="#/app/settings"></a>
  </ion-nav-buttons>
  <ion-content padding="true">
    <h1>Text</h1>
  </ion-content>
</ion-view>

最初に疑問に思うのは、これらのボタンをすべてのビューで再利用する方法はありますか? それらを何度も定義し続けるのは無意味に思えます。

しかし、それは本物ではありません™。[設定] をクリックすると、何かが挿入されion-nav-viewますが、多くのもの (テンプレートにはありません) が含まれており、他のビューやタブも非表示になりません。

いくつかのスクリーンショット:


(ソース: ionicframework.com )

これに対する正しいアプローチは何ですか？

4

1 に答える 1

13

こちらで質問に回答するのは初めてですので、ご容赦ください。

タブ バーのないビューに移動するには: 設定状態から "app" プレフィックスを削除して、親抽象状態 (アプリ) の子ではなくなるようにします。

.state('settings', {
        url: '/settings',
        views: {
          'settings': {
            controller: 'ui/modules/settings/ctrl.js',
            templateUrl: 'ui/modules/settings/view.html'
          }
        }
      });

**この後に州を追加する場合は、必ずセミコロンを削除してください。セミコロンは末尾を示します。

それは応急処置です。
問題の完全な解決策は、イオン プロジェクト テンプレートから始めることです。幸いなことに、グローバル タブ バーであるタブ オプションがあります。

コマンドライン： ionic start appName tabs

これにより、必要なものがすべて揃った適切な開始テンプレートが得られます。サンプルの controllers.js、services.js、app.js ファイルも含まれているので、そこからビルドできます。また、プロジェクトを正しく構成して、予期しないデータがタグに挿入されるのを防ぐのにも役立ちます。

ソース 1: http://ionicframework.com/getting-started/
ソース 2: http://ionicframework.com/docs/api/directive/ionNavView/

**おまけ: ソース 2 には、すべてのテンプレートを index.html ファイル内に保持してアプリを高速化し、ワークフローを簡素化する方法を示す巧妙なトリックもあります。

幸運を。

于 2014-07-23T00:20:53.507 に答える