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

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

我想知道的第一件事是：有没有办法在所有视图之间重用这些按钮？似乎无用于一遍又一遍地定义它们.

但这不是真实的东西.当我点击“设置”时,会有一些东西被注入到离子导航视图中,但是它包含很多东西(不在模板上),而且它不会隐藏其他视图和标签.

一些截图：

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

应该采用什么方法？

.state('setTings',templateUrl: 'ui/modules/setTings/view.html'
          }
        }
      });