[解決済み] Ionicのデフォルトアクティブタブ

質問

Ionic1を使用していますが、デフォルトのアクティブなタブのメカニズムがどのように機能するかを理解するのに手助けが必要です。 現在、3つのタブがあり、デフォルトのアクティブなタブは右のタブです。 左のタブをアクティブにしたいのですが。

私はこの例に従いました -。 Ionic : タブの選択 - CodePen - 私のアプリではデフォルトが右のタブで、例では左のタブになっているのが理解できないのです。

どなたか、この問題に光を当てていただけませんか？

マイコード

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>

ありがとうございます。

どのように解決するのですか？

私は、特定のURLとビューを持つ各タブを独自の状態にすることで解決しました。

.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',
            }
          }
      });

複数のビューを使用する理由やタイミングはよく分かりませんが。