#shopName
と#shopImage
を書き換えは最初にhome.html
を表示させた場合のみで、スライドメニューからhome.html
を選択すると、#shopName
と#shopImage
の書き換えが行われないため、何も表示されません。
つまりJavaScript
のコードが最初の一度のみ実行され、以降は実行されないということになります。
mBaaSの環境がないので、簡易的な処理でサンプルコードを書きました。
AngularJS
を使用し、home.html
を表示させるごとに#shopName
と#shopImage
を書き換えを行います。
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:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<script src="components/loader.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<script>
var app = ons.bootstrap("myApp", ["onsen"]);
app.controller("homeController", ["$scope", function($scope) {
ons.ready(function() {
// 取得処理
$("#shopName").text("こんにちは");
$("#shopImage").attr("src", "https://www.google.co.jp/images/nav_logo242.png");
});
}]);
</script>
</head>
<body>
<ons-sliding-menu var="app.slidingMenu" menu-page="menu.html" main-page="home.html" side="left" type="overlay" max-slide-distance="200px">
</ons-sliding-menu>
</body>
</html>
home.html
<ons-navigator>
<ons-page ng-controller="homeController">
<ons-toolbar>
<div class="left">
<ons-toolbar-button ng-click="app.slidingMenu.toggleMenu()">
<ons-icon icon="bars"></ons-icon></ons-toolbar-button>
</div>
<div class="center">home</div>
</ons-toolbar>
<div align="center">
<img id="shopImage" src="" height="200" width="150"></img>
</div>
<div id="shopName"></div>
</ons-page>
</ons-navigator>