質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

91.37%

  • Monaca

    710questions

    「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

  • AngularJS

    481questions

    AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

  • Onsen UI

    224questions

    HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

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

解決済

回答 1

投稿 2017/12/06 20:40 ・編集 2017/12/06 20:43

  • 評価
  • クリップ 0
  • VIEW 66

shori0128

score 9

前提・実現したいこと

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

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

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

該当のソースコード

ons.bootstrap()
  .controller('imageListCtrl', function ($scope) {
    $scope.item = [{
      src: 'icon/gif-load.gif',
      date: 'Loading...',
      size: 'Loading...'
    }];

    //■ アプリ内画像取得
    const showImage = function () {
      const dirObj = imageDir.createReader();

      let process = [];

      return readEntriesSync(dirObj)
        .then(function (fileArray) {
          return Promise.all(fileArray.filter(function (fileObj) {
              const ext = fileObj.name.split('.')[1];
              if (ext == 'jpg') return fileObj;
            })
            .map(function (fileObj) {
              return getMetadataSync(fileObj);
            }));
        })
        .then(function (fileArray) {
          //ファイル一覧をタイムスタンプ順(昇順)にソート
          fileArray.sort(function (a, b) {
              if (a.metadata.modificationTime > b.metadata.modificationTime) return -1;
              if (a.metadata.modificationTime < b.metadata.modificationTime) return 1;
              return 0;
            })
            .forEach(function (fileObj, index) {
              $scope.item[index] = {
                src: fileObj.toURL().replace('.jpg', '.thm'),
                date: fileObj.metadata.modificationTime,
                size: fileObj.metadata.size
              };
            });
          $scope.delegate.refresh();
        })
        .catch(getErr);
    };

    //■ タブ切り替え
    const onPostChange = function (e) {
      if (e.index === 1) selectImage();
      if (e.index === 2) showImage();
    };

    //■ 起動時にアプリケーションフォルダへアクセス
    ons.ready(function () {
      const tabbar = document.getElementById('tabbar');
      tabbar.addEventListener('postchange', function () {
        onPostChange(event);
      });

      requestFileSystemSync(LocalFileSystem.TEMPORARY)
        .then(function (fs) {
          tempDir = fs;
        })
        .catch(getErr);

      resolveLocalFileSystemURLSync(cordova.file.dataDirectory)
        .then(function (fs) {
          appDir = fs;
          return getDirectorySync(appDir, imageFolder);
        })
        .then(function (fs) {
          imageDir = fs;
          showImage();
        })
        .catch(getErr);
    });

    $scope.delegate = {
      configureItemScope: function (index, itemScope) {
        itemScope.item = {
          src: $scope.item[index].src,
          date: $scope.item[index].date,
          size: $scope.item[index].size
        };
      },
      calculateItemHeight: function (index) {
        return 91;
      },
      countItems: function () {
        return $scope.item.length;
      }
    };

    $scope.openGZEdit = function (index) {
      //ここで引数を渡したいが。。。
      appNavi.pushPage('gazoEdit.html', {
        src: $scope.item[index].src,
        date: $scope.item[index].date,
        size: $scope.item[index].size
      });
    };
  })
  .controller('gazoEditCtrl', function ($scope) {
     //is not functionとエラーが出る。
     const options = $scope.appNavi.getCurrentPage();
  });


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>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

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

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

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

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

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

投稿 2017/12/07 11:25

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/12/08 00:01

    >akabee様
    お世話になっています。
    早速確認させていただき、また不明な点がありましたら質問させてください。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

ただいまの回答率

91.37%

関連した質問

  • 解決済

    sliding-menuとnavigatorを使用すると画面制御が失われる

    実現したいこと monacaで<ons-sliding-menu>と<ons-navigator>と<ons-tabbar>を組み合わせてアプリケーションを作成したいです。

  • 解決済

    ons-tabの非表示

    前提・実現したいこと MonacaでOnsenUI v2を使ったアプリを製作していて、ons-tabを用いてページの切り替えを行っているのですが、ons-tab内のページでpus

  • 解決済

    タイトルやメニューはそのままそれ以下の部分を変更したいです。

    前提・実現したいこと 現在、Onsen U1 V2 Angular1 Splitterを使って開発をしようとしているのですが、ページにボタンを作り、クリックすると画面の表示内容を

  • 解決済

    スワイプ操作での画面遷移

    前提・実現したいこと Monacaでアプリ開発の勉強をしているのですが、OnsenUIのpushpageで画面遷移をした後に、画面を上にスワイプすることでpop-pageができる

  • 受付中

    ポップアップ表示が出来ません

    【質問内容】 monacaでonsenUI v1 ⇒onsenUI v2に移行させたいのですがうまくいきません。 リファレンスを見たりサイトを色々調べてみて色々試してみたのです

  • 解決済

    ons-navigatorでのページ遷移

    前提・実現したいこと ons-navigatorでページを切り替えた後、ons-tabbarのons-tab要素を非表示にし、ons-toolbarにons-back-butto

  • 解決済

    OnsenUIコンポーネントの値保持

    前提・実現したいこと navigatorでpopPage()した後も、遷移前のpageの<ons-input type="checkbox">の値を保存しておきたいのですが、何か良

  • 解決済

    monaca onsen ui ver2 で ng-repeat を使用したい。

    前提・実現したいこと お世話になります。 monaca で ng-repeatを使用したく、 下記のページを参考にしてmonaca-onsen navigation にて プロ

同じタグがついた質問を見る

  • Monaca

    710questions

    「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

  • AngularJS

    481questions

    AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

  • Onsen UI

    224questions

    HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。