【Monaca】ons-splitter、ons-tabbar、ons-navigatorを組み合わせる

動作環境：AngularJS V1 + Onsen UI V2
「【Monaca】Onsen UI V2 + Angular JS V1 最新バージョンのプロジェクト作成方法」に基づき、新規プロジェクトを作成。

1.ログインページとタブ表示ページを切り替えるため、ons-splitterを使用する。
2.ons-page内にons-tabbarを組み込むと、タイミングによりmyTabbarを参照できないため、ディレクティブを使用する。
3.ons-navigatorはons-page内に組み込む必要がある。
4.タブ切り替えのタイミングでons-navigatorで表示するページを初期ページに戻す必要がある。

※2017/08/30 コード修正済み。タブ切り替え時にons-navigatorが追加される不具合を修正。
※2018/01/10 コード修正済み。

<!DOCTYPE HTML>
<html ng-app="myApp">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
  <script src="components/loader.js"></script>
  <script src="js/angular.min.js"></script>
  <script src="onsenui/js/onsenui.min.js"></script>
  <script src="onsenui/js/angular-onsenui.min.js"></script>
  <link rel="stylesheet" href="components/loader.css">
  <link rel="stylesheet" href="onsenui/css/onsenui.css">
  <link rel="stylesheet" href="onsenui/css/onsen-css-components.css">
  <link rel="stylesheet" href="css/style.css">
  <script>
    var app = angular.module("myApp", ["onsen"]);
    app.controller("indexController", function ($scope) {
      ons.ready(function () {
        mySplitter.content.load("login.html");
      });
    });
    app.directive("myTabbar", function () {
      return {
        restrict: "EA",
        link: function (scope, elem, attrs) {
          myTabbar.on("prechange", function (e) {
            if (myTabbar.getActiveTabIndex() == 0) {
              if (myNavigator1.pages.length > 1) {
                myNavigator1.popPage();
              }
            } else {
              if (myNavigator2.pages.length > 1) {
                myNavigator2.popPage();
              }
            }
          });
        }
      };
    });
  </script>
</head>

<body ng-controller="indexController">
  <ons-splitter var="mySplitter">
    <ons-splitter-side collapse></ons-splitter-side>
    <ons-splitter-content></ons-splitter-content>
  </ons-splitter>

  <ons-template id="login.html">
    <ons-page>
      <ons-toolbar>
        <div class="center">Login</div>
      </ons-toolbar>
      <p style="text-align: center;">
        <br />
        <ons-input type="text" placeholder="Password"></ons-input>
        <br />
        <br />
        <ons-button ng-click="mySplitter.content.load('main.html')">Login</ons-button>
      </p>
    </ons-page>
  </ons-template>

  <ons-template id="main.html">
    <ons-page>
      <ons-tabbar var="myTabbar" my-tabbar>
        <ons-tab icon="home" label="page1" page="tab1.html" active="true"></ons-tab>
        <ons-tab icon="star" label="page2" page="tab2.html"></ons-tab>
      </ons-tabbar>
    </ons-page>
  </ons-template>

  <ons-template id="tab1.html">
    <ons-page>
      <ons-navigator var="myNavigator1" page="page1.html"></ons-navigator>
    </ons-page>
  </ons-template>

  <ons-template id="page1.html">
    <ons-page>
      <ons-toolbar>
        <div class="center">Page1</div>
      </ons-toolbar>
      <p>
        <ons-button ng-click="myNavigator1.pushPage('page11.html')">Next</ons-button>
      </p>
    </ons-page>
  </ons-template>

  <ons-template id="page11.html">
    <ons-page>
      <ons-toolbar>
        <div class="left">
          <ons-back-button ng-click="myNavigator1.popPage()">Prev</ons-back-button>
        </div>
        <div class="center">Page11</div>
      </ons-toolbar>
    </ons-page>
  </ons-template>

  <ons-template id="tab2.html">
    <ons-page>
      <ons-navigator var="myNavigator2" page="page2.html"></ons-navigator>
    </ons-page>
  </ons-template>

  <ons-template id="page2.html">
    <ons-page>
      <ons-toolbar>
        <div class="center">Page2</div>
      </ons-toolbar>
      <p>
        <ons-button ng-click="myNavigator2.pushPage('page21.html')">Next</ons-button>
      </p>
    </ons-page>
  </ons-template>

  <ons-template id="page21.html">
    <ons-page>
      <ons-toolbar>
        <div class="left">
          <ons-back-button ng-click="myNavigator2.popPage()">Prev</ons-back-button>
        </div>
        <div class="center">Page21</div>
      </ons-toolbar>
    </ons-page>
  </ons-template>
</body>

</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

<!DOCTYPE HTML>

<head>

var app = angular.module("myApp", ["onsen"]);

app.controller("indexController", function ($scope) {

ons.ready(function () {

mySplitter.content.load("login.html");

});

app.directive("myTabbar", function () {

return {

restrict: "EA",

link: function (scope, elem, attrs) {

myTabbar.on("prechange", function (e) {

if (myTabbar.getActiveTabIndex() == 0) {

if (myNavigator1.pages.length > 1) {

myNavigator1.popPage();

}

} else {

if (myNavigator2.pages.length > 1) {

myNavigator2.popPage();

}

});

}

};

});

</script>

</head>

<ons-splitter var="mySplitter">

<ons-splitter-side collapse></ons-splitter-side>

<ons-splitter-content></ons-splitter-content>

</ons-splitter>

<ons-template id="login.html">

<ons-page>

<ons-toolbar>

<div class="center">Login</div>

</ons-toolbar>

<br />

<ons-input type="text" placeholder="Password"></ons-input>

<br />

<ons-button ng-click="mySplitter.content.load('main.html')">Login</ons-button>

</p>

</ons-page>

</ons-template>

<ons-template id="main.html">

<ons-page>

<ons-tabbar var="myTabbar" my-tabbar>

<ons-tab icon="home" label="page1" page="tab1.html" active="true"></ons-tab>

<ons-tab icon="star" label="page2" page="tab2.html"></ons-tab>

</ons-tabbar>

</ons-page>

</ons-template>

<ons-template id="tab1.html">

<ons-page>

<ons-navigator var="myNavigator1" page="page1.html"></ons-navigator>

</ons-page>

</ons-template>

<ons-template id="page1.html">

<ons-page>

<ons-toolbar>

</ons-toolbar>

<p>

<ons-button ng-click="myNavigator1.pushPage('page11.html')">Next</ons-button>

</p>

</ons-page>

</ons-template>

<ons-template id="page11.html">

<ons-page>

<ons-toolbar>

<ons-back-button ng-click="myNavigator1.popPage()">Prev</ons-back-button>

</div>

</ons-toolbar>

</ons-page>

</ons-template>

<ons-template id="tab2.html">

<ons-page>

<ons-navigator var="myNavigator2" page="page2.html"></ons-navigator>

</ons-page>

</ons-template>

<ons-template id="page2.html">

<ons-page>

<ons-toolbar>

</ons-toolbar>

<p>

<ons-button ng-click="myNavigator2.pushPage('page21.html')">Next</ons-button>

</p>

</ons-page>

</ons-template>

<ons-template id="page21.html">

<ons-page>

<ons-toolbar>

<ons-back-button ng-click="myNavigator2.popPage()">Prev</ons-back-button>

</div>

</ons-toolbar>

</ons-page>

</ons-template>

</body>

</html>

【Monaca】ons-splitter、ons-tabbar、ons-navigatorを組み合わせる