在 Ionic Framework 上的 ion-tabs 之外创建视图

Question

我是 Ionic 的新手，但我想尝试它已经很久了。我只是在玩，所以也许我没有得到完整的概念。

我正在尝试做一个简单的应用程序，底部有三个选项卡，三个选项卡都有一个设置图标。当您单击该图标时，标签应该隐藏并显示设置屏幕。

由于我不希望用户丢失任何内容，所有视图都继承自全局视图：

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>

其中一种观点：

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

什么应该是正确的方法？

Answer 1

这是我第一次在这里回答问题，请多多包涵。

导航到不带标签栏的视图： 从设置状态中移除“app”前缀，因此它不再是父抽象状态（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 文件中，以加快应用程序的速度并简化您的工作流程。

祝你好运。