İyonik sekmeli sidemenu nasıl kurulur?

Question

Benim düşünceme göre, bir uygulama, ayar ve sayfalar gibi şeyler için ana uygulama için sekmeler ile birlikte oldukça temel ve standart bir uygulama arayüzüdür. Google'ın Messenger uygulaması gibi şeyler bunu kullanıyor.

Çalışmak için uğraşıyorum ve çok az tatmin edici bilgi ile bunun hakkında birçok soru olduğunu görüyorum. Swidebox'larla bir sidemenu birleştirdim. Bu kadar kolay olmalı. Uygulamalarım için jQuery Mobile'ı kullandım. Bu, İyonik'ten çok daha karmaşıktır ama böyle bir arayüz yapmak kolaydır ve iyi çalışır.

Yapmakta olduğum sorun, sekme şablonlarının sekmelere yüklenmemesidir.

config(function($stateProvider, $urlRouterProvider) { 
    $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('tab.tab1', { 
     url: 'tab/tab1', 
     views: { 
     'tab-tab1': { 
      templateUrl: 'templates/tab-tab1.html', 
      controller: 'tab1Ctrl' 
     } 
     } 
    }) 

.state('tab.tab-tab2', { 
     url: 'tab/tab2', 
     views: { 
     'tab-tab2': { 
      templateUrl: 'templates/tab-tab2.html', 
      controller: 'tab2Ctrl' 
     } 
     } 
    }) 

.state('tab.extras', { 
    url: 'tab/extras', 
    views: { 
     'tab-extras': { 
     templateUrl: 'templates/tab-extras.html', 
     controller: 'AccountCtrl' 
     } 
    } 
    }) 

    .state('app.about', { 
     url: "/about", 
     views: { 
     'menuContent': { 
      templateUrl: "templates/about.html", 
      controller: 'aboutCtrl' 
     } 
     } 
    }); 
    // if none of the above states are matched, use this as the fallback 
    $urlRouterProvider.otherwise('/app/tabs'); 
}); 

yan menü çalışıyor ve geri sekmelerine sayfa hakkında onunla gezinmek veya edebilirsiniz: Bu eksik ama burada benim app.js kod parçacığı olduğunu ediyorum saçma şey olabilir. Sekmeler, odağı değiştirdikleri ve simgeler renk değiştirdiği için çalışır, ancak şablonlar bunlara yüklenmez. İki kere üls adlarını kontrol ettim.

Bunu nasıl yapacağını bilen var mı? Bir yerde küçük bir hata yaptım ve işe yaradıysam, bunu nasıl oluşturacağımın bir örneği olarak imho, çok ihtiyaç duyulan bir arayüz olacak.

Düzenleme: İstendiği gibi.

<ion-tabs class="tabs-icon-top tabs-color-active-assertive"> 

    <ion-tab title="tab1" icon="ion-man" href="#/tab/tab1"> 
    <ion-nav-view name="tab-tab1"></ion-nav-view> 
    </ion-tab> 

    <ion-tab title="tab2" icon="ion-person-stalker" href="#/tab/tab2"> 
    <ion-nav-view name="tab-tab2"></ion-nav-view> 
    </ion-tab> 

    <ion-tab title="Extras" icon="ion-heart" href="#/tab/extras"> 
    <ion-nav-view name="tab-extras"></ion-nav-view> 
    </ion-tab> 

</ion-tabs> 

Sanırım hepsi eşleşiyor, değil mi?

Not - bunun yinelenen olmasıyla ilgili sorguyla ilgili olarak; Uygulamam, ana sayfada yan menü bulunan sekmeli bir uygulama. Diğer soru, sekmeleri olan bir dizi bölüm içeren bir uygulama hakkında. Tamamen farklı bir yapı.

Answer 1

Yönlendirmenin biraz kapalı olduğunu düşünüyorum - Çocuğunuzun sekmeleri tam olarak bildirilmiyor. Bu

.state('tab.tab1', { 

gibi onları ilan ettik ... ve ebeveyn tab hal ilan hiç. Böylece ana durum bildirilene kadar 'asılı' bırakılır. ui yönlendirici, bu gerçekleşene kadar onları görmezden gelecektir.

bu

config(function($stateProvider, $urlRouterProvider) { 
    $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.tabs.tab1', { 
     url: '/tab1', 
     views: { 
     'tab-tab1': { 
      templateUrl: 'templates/tab-tab1.html', 
      controller: 'tab1Ctrl' 
     } 
     } 
    }) 

.state('app.tabs.tab2', { 
     url: '/tab2', 
     views: { 
     'tab-tab2': { 
      templateUrl: 'templates/tab-tab2.html', 
      controller: 'tab2Ctrl' 
     } 
     } 
    }) 

.state('app.tabs.extras', { 
    url: '/extras', 
    views: { 
     'tab-extras': { 
     templateUrl: 'templates/tab-extras.html', 
     controller: 'AccountCtrl' 
     } 
    } 
    }) 

    .state('app.about', { 
     url: "/about", 
     views: { 
     'menuContent': { 
      templateUrl: "templates/about.html", 
      controller: 'aboutCtrl' 
     } 
     } 
    }); 
    // if none of the above states are matched, use this as the fallback 
    $urlRouterProvider.otherwise('/app/tabs'); 
}); 

Ve daha/daha net Sekmelerinizi şablonunda ui-sref yerine href kullanmaya çalışın - daha kolay Test edilmedi

<ion-tabs class="tabs-icon-top tabs-color-active-assertive"> 

    <ion-tab title="tab1" icon="ion-man" ui-sref="app.tabs.tab1"> 
    <ion-nav-view name="tab-tab1"></ion-nav-view> 
    </ion-tab> 

    <ion-tab title="tab2" icon="ion-person-stalker" ui-sref="app.tabs.tab2"> 
    <ion-nav-view name="tab-tab2"></ion-nav-view> 
    </ion-tab> 

    <ion-tab title="Extras" icon="ion-heart" ui-sref="app.tabs.extras"> 
    <ion-nav-view name="tab-extras"></ion-nav-view> 
    </ion-tab> 

</ion-tabs> 

eşleştiren ne devlet bir şey görmek ama sanırım tamir etmeli! Konsolda BTW'de herhangi bir hata var mı?