Standard-Registerkarte "Aktiv" in Ionic

Question

Ich verwende Ionic1 und benötige Hilfe, um herauszufinden, wie der aktive Standard-Tab-Mechanismus funktioniert. Momentan gibt es 3 Registerkarten und die standardmäßig aktive Registerkarte ist die richtige. Ich möchte, dass es die linke ist.

Ich folgte diesem Beispiel - Ionic : Select Tab - CodePen - und die standardmäßig aktive Registerkarte hier ist die linke (was ist, was ich will), so verstehe ich nicht, warum in meiner App der Standard ist die richtige Registerkarte und in dem Beispiel ist die linke Registerkarte.

Kann jemand etwas Licht auf das Thema werfen?

My-Code

article.route.js:

.state('app.article', { 
     abstract: true, 
     templateUrl: 'app/article/articleTabs.html', 
     }) 


     .state('app.article.details', { 
     url: '/home/:articleID', 
      views: { 
      'first-tab': { 
       templateUrl: 'app/article/article.html', 
       controller: 'ArticleController', 
       controllerAs: 'vm', 
      }, 
      'second-tab': { 
       templateUrl: 'app/article/article.html', 
       controller: 'ArticleController', 
       controllerAs: 'vm', 
      }, 
      'third-tab': { 
       templateUrl: 'app/article/article.html', 
       controller: 'ArticleController', 
       controllerAs: 'vm', 
      } 
      } 
     }); 

articleTabs.html:

<ion-tabs> 
    <ion-tab title="First" ui-sref="app.article.details"> 
    <ion-nav-view name="first-tab"></ion-nav-view> 
    </ion-tab> 

    <ion-tab title="Second" ui-sref="app.article.details"> 
    <ion-nav-view name="second-tab"></ion-nav-view> 
    </ion-tab> 

    <ion-tab title="Third" ui-sref="app.article.details"> 
    <ion-nav-view name="third-tab"></ion-nav-view> 
    </ion-tab> 
</ion-tabs> 

article.html:

<ion-view> 
    <ion-nav-buttons side="secondary"> 
    <button class="button button-large ion-ios-location" ng-click="vm.doSomething()"> 
    </button> 
    </ion-nav-buttons> 
    <ion-content has-bouncing="false" overflow-scroll="true"> 
    ........... 
    </div> 
    </ion-content> 
</ion-view> 

Dank.

Answer 1

ich es gelöst, indem jeder Reiter einen eigenen Staat mit bestimmten URL zu geben:

$timeout(function() { 
    $ionicTabsDelegate.select(2, false);  
    },400); 

Answer 2

Es scheint mir, dass der CodePen-Link, den Sie in der Post zur Verfügung gestellt, auf die erste Registerkarte voreingestellt und danach auf die dritte Registerkarte springen.

Dieses unerwartete Verhalten wird durch den folgenden Code verursacht. Daher sollte Ihre Registerkarte standardmäßig nach links verschoben werden, wenn Sie diesen Code entfernen.

$urlRouterProvider.otherwise('//the default tab you needed');

am Ende app.js

Answer 3

Es ist einfach, nur diese Zeile ändern und view:

.state('app.article.details', { 
     url: '/home/:articleID/first', 
      views: { 
      'first-tab': { 
       templateUrl: 'app/article/article.html', 
       controller: 'ArticleController', 
       controllerAs: 'vm', 
      } 
      } 
     }), 
.state('app.article.details', { 
     url: '/home/:articleID/second', 
      views: { 
      'second-tab': { 
       templateUrl: 'app/article/article.html', 
       controller: 'ArticleController', 
       controllerAs: 'vm', 
      } 
      } 
     }), 
.state('app.article.details', { 
     url: '/home/:articleID/third', 
      views: { 
      'third-tab': { 
       templateUrl: 'app/article/article.html', 
       controller: 'ArticleController', 
       controllerAs: 'vm', 
      } 
      } 
     }); 

Nicht sicher, warum oder wenn mehrere Ansichten verwendet werden sollten.