###前提・実現したいこと
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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/12/07 15:01