Skip to main content
本文に 9 文字追加
ソース リンク
otak-lab
  • 1,448
  • 2
  • 9
  • 14

#shopName#shopImageの書き換えは最初にhome.htmlを表示させた場合のみで、スライドメニューからhome.htmlを選択すると、#shopName#shopImageの書き換えが行われないため、何も表示されません。
つまり、現在のやり方ではJavaScriptのコード最初の一度のみ実行され、以降は実行されないということになります。

#shopName#shopImageの書き換えは最初にhome.htmlを表示させた場合のみで、スライドメニューからhome.htmlを選択すると、#shopName#shopImageの書き換えが行われないため、何も表示されません。
つまりJavaScriptのコード最初の一度のみ実行され、以降は実行されないということになります。

#shopName#shopImageの書き換えは最初にhome.htmlを表示させた場合のみで、スライドメニューからhome.htmlを選択すると、#shopName#shopImageの書き換えが行われないため、何も表示されません。
つまり、現在のやり方ではJavaScriptのコード最初の一度のみ実行され、以降は実行されないということになります。

編集済みの本文
ソース リンク
otak-lab
  • 1,448
  • 2
  • 9
  • 14

#shopName#shopImage書き換えは最初にhome.htmlを表示させた場合のみで、スライドメニューからhome.htmlを選択すると、#shopName#shopImageの書き換えが行われないため、何も表示されません。
つまりJavaScriptのコードが最初の一度のみ実行され、以降は実行されないということになります。

mBaaSの環境がないので、簡易的な処理でサンプルコードを書きました。
AngularJSを使用し、home.htmlを表示させるごとに#shopName#shopImageを書き換えを行います

*JS/CSSコンポーネントの追加と削除でjQueryを追加

#shopName#shopImage書き換えは最初にhome.htmlを表示させた場合のみで、スライドメニューからhome.htmlを選択すると、#shopName#shopImageの書き換えが行われないため、何も表示されません。
つまりJavaScriptのコードが最初の一度のみ実行され、以降は実行されないということになります。

mBaaSの環境がないので、簡易的な処理でサンプルコードを書きました。
AngularJSを使用し、home.htmlを表示させるごとに#shopName#shopImageを書き換えを行います。

#shopName#shopImage書き換えは最初にhome.htmlを表示させた場合のみで、スライドメニューからhome.htmlを選択すると、#shopName#shopImageの書き換えが行われないため、何も表示されません。
つまりJavaScriptのコードが最初の一度のみ実行され、以降は実行されないということになります。

mBaaSの環境がないので、簡易的な処理でサンプルコードを書きました。
AngularJSを使用し、home.htmlを表示させるごとに#shopName#shopImageを書き換えを行います

*JS/CSSコンポーネントの追加と削除でjQueryを追加

ソース リンク
otak-lab
  • 1,448
  • 2
  • 9
  • 14

#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>