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但是它包含很多内容（不在模板上），而且它不会隐藏其他视图和标签。

一些截图：

http://forum.ionicframework.com/uploads/default/_optimized/410/778/37f711d3f9_312x500.png

对此有什么正确的方法？

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文件中以加速应用程序并简化您的工作流程。

古德勒克。

在Ionic Framework上创建离子选项卡外的视图

1 个答案: