sekme ve yan menü - devlete bağlantılar bu yanıta göre başvurumun yapısını inşa ettik

Question

çalışmaz:

Uygulamamı: Yan menü ve sekmeleri birleştirerek

How to set up sidemenu with tabs in Ionic?

. böyle js dosyası görünüm: Ben urlRou ait otherwise yöntemine rotayı ayarı tüm yolları test ederken

$stateProvider 

.state('app', { 
url: '/app', 
abstract: true, 
templateUrl: 'templates/menu.html', 
controller: 'AppCtrl' 
}) 
.state('app.tabs', { 
    url: '/tabs', 
    views: { 
    'menuContent': { 
     templateUrl: 'templates/tabs.html' 
    } 
    } 
}) 
.state('app.tabs1.general', { 
    url: '/tabs1-general', 
    views: { 
    'general-tab': { 
     templateUrl: 'templates/general1.html', 
     controller: 'General1Ctrl' 
    } 
    } 
}) 
.state('app.tabs2', { 
    url: '/tabs2', 
    views: { 
    'menuContent': { 
     templateUrl: 'templates/tabs2.html' 
    } 
    } 
}) 
.state('app.tabs2.general', { 
    url: '/tabs2-general', 
    views: { 
    'general2-tab': { 
     templateUrl: 'templates/general2.html', 
     controller: 'General1Ctrl' 
    } 
    } 
}) 

$urlRouterProvider.otherwise('/app/ofertas/ofertas-reporte'); 

her şey iyi çalışır Ben yan çubuğu öğeleri yolları ayarladığınızda terProvider ancak URL eşleşmiyor:

İşte

benim menüsü:

<ion-content> 
    <ion-list class="coloredList"> 
    <ion-item class="sap-color" menu-close href="#/app/tabs1"> 
     <i class="ion-compose"></i> tabs1 
    </ion-item> 
    <ion-item class="sap-color" menu-close href="#/app/tabs2"> 
     <i class="ion-android-star"></i> tabs2 
    </ion-item> 
... 

Ben de ui-sref denedim ama işe yaramış görünmüyor .

Herhangi bir öneri?

Answer 1

Bu projeyi kullanıma sunun: https://github.com/mircobabini/ionic-sidemenu-tabs-together Bence ihtiyacın olan şey bu. Daha eski bir proje ve bazı güncellemelere ihtiyaç duyabilir ama başlangıç ​​noktası olarak çalışır. Bir kod yazısında bir demo var, bağlantı github üzerindedir. Bu şey gibi görünüyor

Answer 2

yolları ile yanlış, bunu deneyebilirsiniz:

$stateProvider 

.state('app', { 
url: '/app', 
abstract: true, 
templateUrl: 'templates/menu.html', 
controller: 'AppCtrl' 
}) 
.state('app.tabs', { 
    url: '/tabs', 
    views: { 
    'menuContent': { 
     templateUrl: 'templates/tabs.html' 
    } 
    } 
}) 
.state('app.tabs1', { 
    url: "/tabs1", 
    abstract: true, 
    views: { 
     'menuContent': { 
       templateUrl: "templates/tabs1.html", 
       controller: "Tabs1Ctrl" 
      } 
     } 
}) 
.state('app.tabs1.general', { 
    url: '/tabs1-general', 
    views: { 
    'general-tab': { 
     templateUrl: 'templates/general1.html', 
     controller: 'General1Ctrl' 
    } 
    } 
}) 
.state('app.tabs2', { 
    url: '/tabs2', 
    abstract: true, 
    views: { 
    'menuContent': { 
     templateUrl: 'templates/tabs2.html' 
    } 
    } 
}) 
.state('app.tabs2.general', { 
    url: '/tabs2-general', 
    views: { 
    'general2-tab': { 
     templateUrl: 'templates/general2.html', 
     controller: 'General1Ctrl' 
    } 
    } 
}) 

$urlRouterProvider.otherwise('/app/ofertas/ofertas-reporte'); 

Answer 3

Çocuğunuz devletler de örneğin app.tabs1.general hal ilan önce abstract=true ile app.tabs1 devlet olması app.tabs1.general ihtiyaçlarını beyan edilmez. Ve böyle devam aşağıdaki kodu gibi devletlerin geri kalanı için:

$stateProvider 

.state('app', { 
    url: '/app', 
    abstract: true, 
    templateUrl: 'templates/menu.html', 
    controller: 'AppCtrl' 
}) 
.state('app.tabs', { 
    url: '/tabs', 
    views: { 
    'menuContent': { 
    templateUrl: 'templates/tabs.html' 
    } 
    } 
}) 
.state('app.tabs1', { 
    url: "/tabs1", 
    abstract: true, 
    views: { 
    'menuContent': { 
      templateUrl: "templates/tabs1.html", 
      controller: "Tabs1Ctrl" 
     } 
    } 
}) 
.state('app.tabs1.general', { 
url: '/tabs1-general', 
views: { 
'general-tab': { 
    templateUrl: 'templates/general1.html', 
    controller: 'General1Ctrl' 
} 
} 
}) 
.state('app.tabs2', { 
    url: '/tabs2', 
    abstract: true, 
    views: { 
    'menuContent': { 
    templateUrl: 'templates/tabs2.html' 
    } 
} 
}) 
.state('app.tabs2.general', { 
    url: '/tabs2-general', 
    views: { 
    'general2-tab': { 
    templateUrl: 'templates/general2.html', 
    controller: 'General1Ctrl' 
} 
} 
}) 

Ayrıca HTML ui-sref kullanmanız gereken

eyaletinizi değil eşittir href:

<ion-content> 
<ion-list class="coloredList"> 
    <ion-item class="sap-color" menu-close ui-sref="app.tabs1"> 
    <i class="ion-compose"></i> tabs1 
    </ion-item> 
    <ion-item class="sap-color" menu-close href="app.tabs2"> 
    <i class="ion-android-star"></i> tabs2 
    </ion-item> 
... 

Answer 4

O benim eski birisinden projeler. (http://aitam.newtonjoshua.com)

Dokümantasyon: https://newtonjoshua.com/apps/aitam/aitam.html

Her ui routing ilgilenir ion-nav-view kullanımı hakkındadır.

SideMenu:

app.js: Aşağıdaki örnekte bir yan menü bir görünümü vardırmenuContent

menu.html vardır: Seçime bağlı olarak (sekme1 veya sekme2), menuContent içeriği tab1.html veya tab2 olacaktır.html

Tab:

app.js: tab1 incelemeler tab1 genel (N) sahiptir ve Tab2 incelemeler (n) Tab2 genel

Tab1 sahip Sekme seçimine bağlı olarak .html/tab2.html: karşılık gelen html içeriği görüntülenecektir.

// app.js 

     $stateProvider 
      .state('app', { 
       url: "/app", 
       abstract: true, 
       templateUrl: "templates/menu.html", 
       controller: 'AppCtrl' 
      }) 


      //tab1 

      .state('app.tab1', { 
       url: "/tab1", 
       views: { 
        // view name: menuContent 
        'menuContent': { 
         templateUrl: "templates/tab1.html", 
         controller: 'tabs1Ctrl' 
        } 
       } 
      }) 

      .state('app.tab1.general1', { 
       url: '/general1', 
       views: { 
        // view name: tab1-general1 
        'tab1-general1': { 
         templateUrl: 'templates/tab1-general1.html', 
         controller: 'general1Ctrl' 
        } 
       } 
      }) 

      //tab2 

      .state('app.tab2', { 
       url: "/tab2", 
       views: { 
        // view name: menuContent 
        'menuContent': { 
         templateUrl: "templates/tab2.html", 
         controller: 'tabs2Ctrl' 
        } 
       } 
      }) 

      .state('app.tab2.general2', { 
       url: '/general2', 
       views: { 
        // view name: tab2-general2 
        'tab2-general2': { 
         templateUrl: 'templates/tab2-general2.html', 
         controller: 'general2Ctrl' 
        } 
       } 
      }); 
     // if none of the above states are matched, use this as the fallback 
     $urlRouterProvider.otherwise('/app/home'); 

menu.html

<ion-side-menus enable-menu-with-back-views="false"> 
    <ion-side-menu-content > 
     <ion-nav-bar class="bar-navy" > 
      <ion-nav-buttons side="left" > 
       <button ng-show="sideMenu" class="button button-icon button-clear ion-navicon" menu-toggle="left"> 
       </button> 
      </ion-nav-buttons> 
     </ion-nav-bar> 

     <!--view name: menuContent--> 
     <ion-nav-view name="menuContent"></ion-nav-view> 

    </ion-side-menu-content> 

    <ion-side-menu side="left"> 
     <ion-header-bar class="bar-navy"> 
      <h1 class="title" style="color:white">APP NAME</h1> 
     </ion-header-bar> 
     <ion-content> 
      <ion-list> 
       <ion-item nav-clear menu-close href="#/app/tab1" class="item-icon-left"> 
        TAB 1 
       </ion-item> 
       <ion-item nav-clear menu-close href="#/app/tab2" class="item-icon-left"> 
        TAB 2 
       </ion-item> 
       <ion-item nav-clear menu-close href="#/app/home" class="item-icon-left"> 
        Home 
       </ion-item> 
      </ion-list> 

     </ion-content> 
    </ion-side-menu> 
</ion-side-menus> 

tab1.html

app.js 0

<ion-view view-title="TAB 1"> 
    <ion-content class="padding"> 
     TAB 1 
    </ion-content> 
    <ion-tabs id="tab1" class="tabs-icon-bottom"> 

     <ion-tab title="Tab 1 - General 1" icon-off="ion-ios-pie-outline" icon-on="ion-ios-pie" href="#/app/tab1/general1"> 

      <!--view name: tab1-general1--> 
      <ion-nav-view name="tab1-general1"></ion-nav-view> 

     </ion-tab> 

     <ion-tab title="Tab 1 - General 2" icon-off="ion-ios-list-outline" icon-on="ion-ios-list" href="#/app/tab1/general2"> 
      <ion-nav-view name="tab1-general2"></ion-nav-view> 
     </ion-tab> 

    </ion-tabs> 
</ion-view> 

tab2.html

<ion-view view-title="TAB 2"> 
    <ion-content class="padding"> 
     TAB 2 
    </ion-content> 
    <ion-tabs id="tab2" class="tabs-icon-bottom"> 

     <ion-tab title="Tab 2 - General 1" icon-off="ion-ios-pie-outline" icon-on="ion-ios-pie" href="#/app/tab2/general1"> 
      <ion-nav-view name="tab2-general1"></ion-nav-view> 
     </ion-tab> 

     <ion-tab title="Tab 2 - General 2" icon-off="ion-ios-list-outline" icon-on="ion-ios-list" href="#/app/tab2/general2"> 

       <!--view name: tab2-general2--> 
      <ion-nav-view name="tab2-general2"></ion-nav-view> 

     </ion-tab> 

    </ion-tabs> 
</ion-view> 

Answer 5

bu bağlantıdaki diğer HTML ve DEMO http://plnkr.co/edit/T1qr0BWWbtLfHQRJQGJf?p=preview

JS için kontrol edin:

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

    .state('app', { 
    url: '/app', 
    abstract: true, 
    templateUrl: 'menu.html' 
    }) 

    .state('app.tabs', { 
    url: '/tabs', 
    views: { 
     'menuContent': { 
     templateUrl: 'tabs.html' 
     } 
    } 
    }) 

    .state('app.tabs1-general', { 
    url: '/tabs1-general', 
    views: { 
     'menuContent': { 
     templateUrl: 'general1.html' 
     } 
    } 
    }) 

    .state('app.tabs2', { 
    url: '/tabs2', 
    views: { 
     'menuContent': { 
     templateUrl: 'tabs2.html' 
     } 
    } 
    }) 

    .state('app.tabs2-general', { 
    url: '/tabs2-general', 
    views: { 
     'menuContent': { 
     templateUrl: 'general2.html' 
     } 
    } 
    }) 

    $urlRouterProvider.otherwise('/app/tabs'); 
}); 

HTML:

<ion-side-menus> 
    <ion-side-menu-content> 
    <ion-header-bar class="bar-header"> 
     <button class="button button-icon icon ion-navicon" menu-toggle="left"></button> 
    </ion-header-bar> 
    <ion-nav-view name="menuContent"></ion-nav-view> 
    </ion-side-menu-content> 
    <ion-side-menu side="left"> 
    <ion-content> 
     <ion-list class="coloredList"> 
     <ion-item class="sap-color" menu-close href="#/app/tabs"> 
      <i class="ion-compose"></i> tabs1 
     </ion-item> 
     <ion-item class="sap-color" menu-close href="#/app/tabs2"> 
      <i class="ion-android-star"></i> tabs2 
     </ion-item> 
     <ion-item class="sap-color" menu-close href="#/app/tabs1-general"> 
      <i class="ion-compose"></i> tabs1-general 
     </ion-item> 
     <ion-item class="sap-color" menu-close href="#/app/tabs2-general"> 
      <i class="ion-android-star"></i> tabs2-general 
     </ion-item> 
     </ion-list> 
    </ion-content> 
    </ion-side-menu> 
</ion-side-menus>