HTML・JavaScriptを使用してモバイルアプリ開発を最近始めました。開発環境はmonacaクラウドを使用しています。 関連書籍を購入し参照しながら、アプリ開発をしていますが、想定通りの結果を得られない箇所があり、対処方法を確認したく質問しました。
<問題点1>
下記記載したコーディングの通りデバックを行うと、「下記記載した④page2.html」というページに遷移した際にオブジェクトとして用意していたものが誤表示されてしまいます。具体的には①app.jsで定義した取得した変数の文字が表示されてしまいます。
<問題点2>
「スキャン開始」というページに遷移した際にどのボタンを押しても次の処理に進まない
<①app.js>
"use strict";
var loadingDialog = null;
ons.ready(function() {
ons.createAlertDialog('loading.html').then(function(alert) {
loadingDialog = alert;
});
});
module.factory('Product', function() {
var Product = function(params) {
XXXXXXXXXXXXX ←URLから取得した情報を変数に格納
};
return Product;
});
module.controller('AppController', function($scope, Product, $http) {
$scope.scan = function() {
(省略)
});
<②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"> <script src="components/loader.js"></script> <link rel="stylesheet" href="components/loader.css"> <link rel="stylesheet" href="css/style.css"> <script> ons.bootstrap(); ons.disableAutoStatusBarFill(); $(document).on('pageinit', '#page1',function(){ (省略) }); $(document).on('pageinit', '#page2',function(){ (省略) }); </script> </head> <body> <ons-navigator var="myNavigator" page="page1.html"> </ons-navigator> </body> </html><③page1.html>
<ons-page id="page1">
<ons-toolbar>
<④page2.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"> <script src="components/loader.js"></script> <link rel="stylesheet" href="components/loader.css"> <link rel="stylesheet" href="css/style.css"> <script> var module = ons.bootstrap(); ons.disableAutoStatusBarFill(); </script> <script src="app.js"></script> </head> <body ng-controller="AppController"> <ons-page id="page2"> <ons-tabbar> <ons-tab page="scanner.html" active="true" icon="fa-barcode" no-reload></ons-tab> </ons-tabbar> <ons-template id="scanner.html"> <ons-navigator var="navi"> <ons-page> <ons-toolbar> <div class="center">XXXXX</div> </ons-toolbar> <div class="scanner-wrapper"> <p class="scanner-label">XXXX</p> <div class="scanner-eye-catch"> <ons-icon icon="fa-barcode" size="100px"></ons-icon> </div> <ons-button class="scanner-button" modifier="large--cta" ng-click="scan()">XXXX</ons-button> </div> </ons-page> </ons-navigator> </ons-template>回答1件
あなたの回答
tips
プレビュー