monacaでons-sliding-menuを使うとmbaasの取得したデータが消える
現在、monacaでmbaasを使ってデータを取得しています。
取得しているデータは画像データと文字データです。アプリの仕様上、ons-sliding-menuを使って作成を行っているのですが、スライドメニューを開いて戻ると、なぜか取得した画像データと文字データが消えてしまいます。理由がわからなくて困っています。
わかる方がいればご教授よろしくお願いします。
コードをここに入力
index.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 src="js/ncmb-2.0.0.min.js"></script>
<script>
ons.bootstrap();
</script>
<script>
var appKey = "key";
var clientKey = "key";
var applicationID = "id";
var ncmb = new NCMB(appKey,clientKey);
function getShopDetail(shopId) {
var ShopClass = ncmb.DataStore("news");
ShopClass.fetchById(shopId)
.then(function(news) {
$("#shopName").text(news.get("bun"));
$("#shopImage").attr("src" , "https://mb.api.cloud.nifty.com/2013-09-01/applications/" + applicationID + "/publicFiles/" + news.get("image"));
})
.catch(function(error) {
alert(error.message);
});
}
getShopDetail("id1");
</script>
</head>
<body>
<ons-sliding-menu var="app.slidingMenu" menu-page="menu.html" main-page="page1.html" side="left" type="overlay" max-slide-distance="200px">
</ons-sliding-menu>
</body>
</html>
home.html
<ons-navigator>
<ons-page>
<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>