Question

我有一个tabs.html设置，其中有四个页面标签。其中一个页面包含六个项目，在选择项目时，我希望新页面可以滑入视图，但它不会是其他标签项目之一。

将新页面作为隐藏选项卡或将其设置为选项卡外的页面是否更好？我需要传递现有页面的$scope数据以转移到新页面（用于点击项目的数据），我需要新页面来设置新页面的动画。

Answer 1

您希望其他页面位于选项卡之外。如果你试图做一个假的＆＃39;标签，我只能想象这将是很多痛苦和许多错误的来源。最好按照预期使用内容而不是在它们之上进行黑客攻击。您可能需要考虑使用侧边菜单来公开不适合普通标签交互的导航。

请参阅我的codepen，了解一个快速入侵的示例。 http://codepen.io/gnomeontherun/pen/OVLQYL?editors=101

＆＃13;

angular.module('ionicApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider
    .state('home', {
      url: '/',
      controller: 'HomeCtrl',
      templateUrl: 'home.html'
    })
    .state('item', {
      url: '/:item',
      controller: 'ItemCtrl',
      templateUrl: 'item.html'
    });

  $urlRouterProvider.otherwise('/');
})
.controller('HomeCtrl', function($scope, $ionicSideMenuDelegate, $ionicModal) {
  $scope.stooges = [{name: 'Moe'}, {name: 'Larry'}, {name: 'Curly'}];

  $ionicModal.fromTemplateUrl('modal.html', {
    animation: 'slide-in-up',
    scope: $scope
  }).then(function (modal) {
    $scope.modal = modal;
  });
  
  $scope.openMenu = function () {
    $ionicSideMenuDelegate.toggleLeft();
  }
  
  $scope.openModal = function () {
    $scope.modal.show();
  }
  
  $scope.form = {};
  
  $scope.addStooge = function () {
    console.log($scope);
    $scope.stooges.push({name: $scope.form.name});
    $scope.modal.hide();
  };
  
  $scope.$on('$destroy', function() {
    	$scope.modal.remove();
  });

})
.controller('ItemCtrl', function ($scope, $stateParams) {
  $scope.item = $stateParams.item;
});

＆＃13;

<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
    
    <title>Ionic Modal</title>

    <link href="http://code.ionicframework.com/1.0.0-rc.3/css/ionic.css" rel="stylesheet">
    <script src="http://code.ionicframework.com/1.0.0-rc.3/js/ionic.bundle.js"></script>
  </head>
  <body>
    
     <ion-side-menus>
      <ion-side-menu-content>
        <ion-nav-bar class="bar-positive nav-title-slide-ios7">
          <ion-nav-back-button class="button-icon"><span class="icon ion-ios-arrow-left"></span></ion-nav-back-button>
        </ion-nav-bar>
        <ion-nav-view></ion-nav-view>
      </ion-side-menu-content>

      <ion-side-menu side="left">
        <ion-header-bar class="bar bar-header bar-dark"></ion-header-bar>
        <ion-content>
          <ion-list>
            <ion-item href="#/" menu-toggle="left">Home</ion-item>
          </ion-list>
        </ion-content>
      </ion-side-menu>

      <ion-side-menu side="right" >
        <ion-header-bar class="bar-header bar-dark">
          <h1 class="title">Search</h1>
        </ion-header-bar>
        <ion-content>

        </ion-content>
      </ion-side-menu>
    </ion-side-menus>
    
    <script id="home.html" type="text/ng-template">
      <ion-view title="Home">
        <ion-nav-buttons side="right">
          <button class="button button-icon button-clear ion-plus" ng-click="openModal()"></button>
        </ion-nav-buttons>
        <ion-nav-buttons side="left">
          <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
        </ion-nav-buttons>        
          <ion-tabs class="tabs-positive">
            <ion-tab title="Stooges">
              <ion-content class="has-header">
              <h4>The Stooges</h4>
          <ion-list>
            <ion-item ng-repeat="stooge in stooges" href="#/{{stooge.name}}">{{stooge.name}}</ion-item>
          </ion-list>
                </ion-content>
              </ion-tab>
            <ion-tab title="Tab 2">
              <ion-content class="has-header">
              <h2>Just another tab, for another reason</h2>
                </ion-content>
              </ion-tab>
            </ion-tabs>
      </ion-view>
    </script>
    
    <script id="modal.html" type="text/ng-template">
      <div class="modal">
        <ion-header-bar class="bar-header bar-positive">
          <h1 class="title">New Stooge</h1>
          <button class="button button-clear button-primary" ng-click="modal.hide()">Cancel</button>
        </ion-header-bar>
        <ion-content>
          <div class="padding">
            <div class="list">
              <label class="item item-input">
                <span class="input-label">Name</span>
                <input ng-model="form.name" type="text" name="name" />
              </label>
              <button class="button button-full button-positive" ng-click="addStooge()">Create</button>
            </div>
          </div>
        </ion-content>
      </div>
    </script>
    
    <script id="item.html" type="text/ng-template">
      <ion-view title="{{item}}">
        <ion-content>
          <h1>{{item}}</h1>
        </ion-content>
      </ion-view>
    </script>
    
  </body>
</html>

＆＃13;

设置两部分选项卡的离子正确方法

1 个答案: