pushPageの動作について質問です

###前提・実現したいこと
monacaでonsenui+angularjs1でスマホアプリを開発しております。
以下のソースコードについて2点質問があります。

①pushPageを実行した時、レイヤーとしてgazoEdit画面の上にons-tabbarを表示させたいが、現状はons-tabbarの上に被ってしまう。
どのように書くのが適切でしょうか。
②pushPageを実行した時、gazoEditへ引数を渡したいが、getCurrentPageを実行しても「is not function」のエラーが出る。
どこに問題があるのでしょうか。

どなたかご教示いただけますでしょうか。

###該当のソースコード

javascript
1
2ons.bootstrap()
3  .controller('imageListCtrl', function ($scope) {
4    $scope.item = [{
5      src: 'icon/gif-load.gif',
6      date: 'Loading...',
7      size: 'Loading...'
8    }];
9
10    //■ アプリ内画像取得
11    const showImage = function () {
12      const dirObj = imageDir.createReader();
13
14      let process = [];
15
16      return readEntriesSync(dirObj)
17        .then(function (fileArray) {
18          return Promise.all(fileArray.filter(function (fileObj) {
19              const ext = fileObj.name.split('.')[1];
20              if (ext == 'jpg') return fileObj;
21            })
22            .map(function (fileObj) {
23              return getMetadataSync(fileObj);
24            }));
25        })
26        .then(function (fileArray) {
27          //ファイル一覧をタイムスタンプ順（昇順）にソート
28          fileArray.sort(function (a, b) {
29              if (a.metadata.modificationTime > b.metadata.modificationTime) return -1;
30              if (a.metadata.modificationTime < b.metadata.modificationTime) return 1;
31              return 0;
32            })
33            .forEach(function (fileObj, index) {
34              $scope.item[index] = {
35                src: fileObj.toURL().replace('.jpg', '.thm'),
36                date: fileObj.metadata.modificationTime,
37                size: fileObj.metadata.size
38              };
39            });
40          $scope.delegate.refresh();
41        })
42        .catch(getErr);
43    };
44
45    //■ タブ切り替え
46    const onPostChange = function (e) {
47      if (e.index === 1) selectImage();
48      if (e.index === 2) showImage();
49    };
50
51    //■ 起動時にアプリケーションフォルダへアクセス
52    ons.ready(function () {
53      const tabbar = document.getElementById('tabbar');
54      tabbar.addEventListener('postchange', function () {
55        onPostChange(event);
56      });
57
58      requestFileSystemSync(LocalFileSystem.TEMPORARY)
59        .then(function (fs) {
60          tempDir = fs;
61        })
62        .catch(getErr);
63
64      resolveLocalFileSystemURLSync(cordova.file.dataDirectory)
65        .then(function (fs) {
66          appDir = fs;
67          return getDirectorySync(appDir, imageFolder);
68        })
69        .then(function (fs) {
70          imageDir = fs;
71          showImage();
72        })
73        .catch(getErr);
74    });
75
76    $scope.delegate = {
77      configureItemScope: function (index, itemScope) {
78        itemScope.item = {
79          src: $scope.item[index].src,
80          date: $scope.item[index].date,
81          size: $scope.item[index].size
82        };
83      },
84      calculateItemHeight: function (index) {
85        return 91;
86      },
87      countItems: function () {
88        return $scope.item.length;
89      }
90    };
91
92    $scope.openGZEdit = function (index) {
93      //ここで引数を渡したいが。。。
94      appNavi.pushPage('gazoEdit.html', {
95        src: $scope.item[index].src,
96        date: $scope.item[index].date,
97        size: $scope.item[index].size
98      });
99    };
100  })
101  .controller('gazoEditCtrl', function ($scope) {
102     //is not functionとエラーが出る。
103     const options = $scope.appNavi.getCurrentPage();
104  });

index.html

<!DOCTYPE HTML>
<html>

<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="lib/angular/angular.min.js"></script>
  <script src="lib/onsenui/js/onsenui.min.js"></script>
  <script src="lib/onsenui/js/angular-onsenui.min.js"></script>
  <script src="ext/imageResizer/resize.js"></script>
  <script type="text/javascript" src="func.js"></script>
  <script type="text/javascript" src="promise.js"></script>
  <script type="text/javascript" src="index.js"></script>

  <link rel="stylesheet" href="components/loader.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
  <link rel="stylesheet" href="css/bootstrap-4.0.0-beta-dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="css/selectBox.css">
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <ons-navigator page="imageList.html" id="appNavi">
    <ons-page>
      <ons-tabbar position="bottom" id="tabbar">
        <ons-tab label="記事編集" page="kijiEdit.html" icon="edit"></ons-tab>
        <ons-tab label="画像入力" page="imageInput.html" icon="download"></ons-tab>
        <ons-tab label="画像一覧" page="imageList.html" icon="photo" active></ons-tab>
        <ons-tab label="テンプレート編集" page="templateEdit.html" icon="gear"></ons-tab>
      </ons-tabbar>
    </ons-page>
  </ons-navigator>
</body>

</html>

gazoEdit.html

<ons-page id="gazoEdit" ng-controller="gazoEditCtrl">
  <ons-toolbar>
    <div class='center toolbarBtnContainer'>
      <ons-button id="btn1" class="toolbarBtnS" modifier="material">
        <ons-col>
          <ons-icon size="1.4rem" icon="bolt" />
        </ons-col>
        <ons-col>FTP</ons-col>
        <ons-col>送信</ons-col>
      </ons-button>
      <ons-button id="btn2" class="toolbarBtnS" modifier="material">
        <ons-col>
          <ons-icon size="1.4rem" icon="envelope-o" />
        </ons-col>
        <ons-col>メール</ons-col>
        <ons-col>送信</ons-col>
      </ons-button>
      <ons-button id="btn3" class="toolbarBtnS" modifier="material">
        <ons-col>
          <ons-icon size="1.4rem" icon="save" />
        </ons-col>
        <ons-col>保存</ons-col>
      </ons-button>
      <ons-button id="btn4" class="toolbarBtnS" modifier="material">
        <ons-col>
          <ons-icon size="1.4rem" icon="tags" />
        </ons-col>
        <ons-col>ﾃﾝﾌﾟﾚｰﾄ</ons-col>
        <ons-col>保存</ons-col>
      </ons-button>
      <ons-button id="btn5" class="toolbarBtnS" modifier="material">
        <ons-col>
          <ons-icon size="1.4rem" icon="mail-reply" />
        </ons-col>
        <ons-col>戻る</ons-col>
      </ons-button>
    </div>
  </ons-toolbar>
  <div class="background">
    <ons-row>
      <ons-col width="30%">
        <img class="thumb" src="">
      </ons-col>
      <ons-col class="inline" width="70%">
        <ons-col>2017/12/04 17:47:34</ons-col>
        <ons-col>W: 1000 x H: 1000</ons-col>
        <ons-col>1.25 MB</ons-col>
      </ons-col>
    </ons-row>
    <ons-row class="caption">
      <ons-row class="label">タイトル</ons-row>
      <ons-row>
        <input type="text" class="inputCol">
      </ons-row>
      <ons-row class="label">キャプション</ons-row>
      <ons-row>
        <textarea id="textarea" class="inputArea" rows="5"></textarea>
      </ons-row>
      <ons-row class="label">作成者</ons-row>
      <ons-row>
        <input type="text" class="inputCol">
      </ons-row>
      <ons-row class="label">
        <ons-col>
          <ons-row>発信地</ons-row>
          <ons-row>
            <input type="text" class="inputCol" style="width: 95%;">
          </ons-row>
        </ons-col>
        <ons-col>
          <ons-row>特別指示</ons-row>
          <ons-row>
            <input type="text" class="inputCol">
          </ons-row>
        </ons-col>
      </ons-row>
    </ons-row>
  </div>
</ons-page>

行動規範の内容に同意します

回答1件

ベストアンサー

１．についてはこちらやこちらが参考になると思いますので読んでみてください。後者のリンクには、shori0128さんのやろうとしているであろうことそのもののサンプルコードがあります。

ons-navigatorは画面遷移でなく画面定義呼び出しを行う処理であると理解すると良いと思います。

２．について、ons-navigatorを利用した画面の移動で値の受け渡しをしようとすると、まずOnsenUIを用いて受け渡すか、それ以外の仕組みを用いて受け渡すかという判断が必要です。

OnsenUIを用いて行う場合、pushPageの引数optionにdataというプロパティを作成して任意のデータを設定し、pushPageします。
次のページでappNavi.topPage.data...などとすると、遷移元のページで設定したデータが参照できるようになります。
英語ですが、ons-navigatorの「実例」の箇所で解説されています。

OnsenUIを用いない場合、例えばグローバル変数等にデータを設定しておき、次のページでそのグローバル変数を参照するような方法が考えられます。
こっちの方式を利用するのであればなんでもありです。
私自身は、過去に不具合？のようなものと出くわしたため、AngularJSのServiceを用いてデータの受け渡しを行っていますが、こちらの方式に分類されます。

投稿2017/12/07 02:25