タイトルやメニューはそのままそれ以下の部分を変更したいです。

###前提・実現したいこと
現在、Onsen U1 V2 Angular1 Splitterを使って開発をしようとしているのですが、ページにボタンを作り、クリックすると画面の表示内容を変更したいです。その際メニューアイコンやタイトルはそのままにしたいです。例えば、メニューの画面で<a></a>タグをクリックしたときに</ons-toolbar>以下を変更したいです。</ons-toolbar>以上は同じで！
###発生している問題・エラーメッセージ
やり方がわかりません。

###該当のソースコード

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

  <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/style.css">

  <script>
    ons.bootstrap()
      .controller('AppController', function($scope) {
        this.load = function(page) {
          $scope.splitter.content.load(page);
          $scope.splitter.left.close();
        };

        this.toggle = function() {
          $scope.splitter.left.toggle();
        };
      });

    ons.ready(function() {
        console.log("Onsen UI is ready!");
    });
  </script>
</head>
<body>

  <ons-splitter ng-controller="AppController as app" var="splitter">
    <ons-splitter-side side="left" width="220px" collapse swipeable>
      <ons-page>
        <ons-list>
          <ons-list-item ng-click="app.load('home.html')" tappable>
            メニュー
          </ons-list-item>
          <ons-list-item ng-click="app.load('setting.html')" tappable>
            設定
          </ons-list-item>
          <ons-list-item ng-click="app.load('about.html')" tappable>
            詳細
          </ons-list-item>
        </ons-list>
      </ons-page>
    </ons-splitter-side>
    <ons-splitter-content page="setting.html"></ons-splitter-content>
  </ons-splitter>




  <ons-template id="home.html">
    <ons-page>
      <ons-toolbar>
        <div class="left">
          <ons-toolbar-button ng-click="app.toggle()">
            <ons-icon icon="md-menu"></ons-icon>
          </ons-toolbar-button>
        </div>
        <div class="center">
          メニュー
        </div>
      </ons-toolbar>
      <a href="#">ここをクリックして他の表示を変えたい</a>
    </ons-page>
  </ons-template>

  <ons-template id="setting.html">
    <ons-page>
      <ons-toolbar>
        <div class="left">
          <ons-toolbar-button ng-click="app.toggle()">
            <ons-icon icon="md-menu"></ons-icon>
          </ons-toolbar-button>
        </div>
        <div class="center">
          設定
        </div>
      </ons-toolbar>
    </ons-page>
  </ons-template>

  <ons-template id="about.html">
    <ons-page>
      <ons-toolbar>
        <div class="left">
          <ons-toolbar-button ng-click="app.toggle()">
            <ons-icon icon="md-menu"></ons-icon>
          </ons-toolbar-button>
        </div>
        <div class="center">
          詳細
        </div>
      </ons-toolbar>
    </ons-page>
  </ons-template>
</body>
</html>

###試したこと

<div>でdate-role="page" id="#"などにしてページを作って飛ばそうとしましたがメニューバーもないページが出来上がってしまって。

行動規範の内容に同意します

回答1件

ベストアンサー

そういう用途のために、ons-navigatorというコンポーネントが用意されています。
ご提示のソースコードをちょっと書き換えてみました。
メニューページにてボタンを押すと、画面が遷移するようになっています。この動作はons-navigatorというコンポーネントを用いて実現しています。

HTML
1<!DOCTYPE HTML>
2<html>
3<head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
6  <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
7  <script src="components/loader.js"></script>
8  <script src="lib/angular/angular.min.js"></script>
9  <script src="lib/onsenui/js/onsenui.min.js"></script>
10  <script src="lib/onsenui/js/angular-onsenui.min.js"></script>
11
12  <link rel="stylesheet" href="components/loader.css">
13  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
14  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
15  <link rel="stylesheet" href="css/style.css">
16
17  <script>
18    ons.bootstrap()
19      .controller('AppController', function($scope) {
20        this.load = function(page) {
21          $scope.splitter.content.load(page);
22          $scope.splitter.left.close();
23        };
24
25        this.toggle = function() {
26          $scope.splitter.left.toggle();
27        };
28      })
29
30      .controller("TestController",function(){
31        this.pushPage = function() {
32          myNavigator.pushPage("setting.html");
33        };
34      });
35      
36    ons.ready(function() {
37        console.log("Onsen UI is ready!");
38    });
39  </script>
40</head>
41<body>
42
43<ons-navigator var="myNavigator"  page="mainmenu.html">
44  
45</ons-navigator>
46
47<ons-template id="mainmenu.html">
48  
49  <ons-splitter ng-controller="AppController as app" var="splitter">
50    <ons-splitter-side side="left" width="220px" collapse swipeable>
51      <ons-page>
52        <ons-list>
53          <ons-list-item ng-click="app.load('home.html')" tappable>
54            メニュー
55          </ons-list-item>
56          <ons-list-item ng-click="app.load('setting.html')" tappable>
57            設定
58          </ons-list-item>
59          <ons-list-item ng-click="app.load('about.html')" tappable>
60            詳細
61          </ons-list-item>
62        </ons-list>
63      </ons-page>
64    </ons-splitter-side>
65    <ons-splitter-content page="setting.html"></ons-splitter-content>
66  </ons-splitter>
67
68</ons-template>
69
70
71
72  <ons-template id="home.html">
73    <ons-page ng-controller="TestController as test">
74      <ons-toolbar>
75        <div class="left">
76          <ons-toolbar-button ng-click="app.toggle()">
77            <ons-icon icon="md-menu"></ons-icon>
78          </ons-toolbar-button>
79        </div>
80        <div class="center">
81          メニュー
82        </div>
83      </ons-toolbar>
84      <a href="#">ここをクリックして他の表示を変えたい</a>
85      <ons-button ng-click="test.pushPage()">
86        pushPage
87      </ons-button>
88    </ons-page>
89  </ons-template>
90
91  <ons-template id="setting.html">
92    <ons-page>
93      <ons-toolbar>
94        <div class="left">
95          <ons-toolbar-button ng-click="app.toggle()">
96            <ons-icon icon="md-menu"></ons-icon>
97          </ons-toolbar-button>
98        </div>
99        <div class="center">
100          設定
101        </div>
102      </ons-toolbar>
103    </ons-page>
104  </ons-template>
105
106  <ons-template id="about.html">
107    <ons-page>
108      <ons-toolbar>
109        <div class="left">
110          <ons-toolbar-button ng-click="app.toggle()">
111            <ons-icon icon="md-menu"></ons-icon>
112          </ons-toolbar-button>
113        </div>
114        <div class="center">
115          詳細
116        </div>
117      </ons-toolbar>
118    </ons-page>
119  </ons-template>
120</body>
121</html>

画面遷移には、基本的にこのons-navigatorを用いるようにすると良いかと思います。

投稿2017/04/30 13:53

編集2017/04/30 13:54

akabee

総合スコア1947

terry3

2017/04/30 14:00

なるほど。ありがとうございます。

terry3

2017/04/30 15:15

またもしよろしければ、 <ons-template id="home.html"> <ons-page ng-controller="TestController as test"> の「ng-controller="TestController as test"」の意味について教えてもらってもよろしいですか？

akabee

2017/04/30 16:07 編集

AppController as app　で使っておられるので使ってみましたが、もしかすると、サンプルやどなたかのコードの流用でしたでしょうか？ as記法といい、AngularJSのControllerを使う際の記法の一つです。詳しくはこちら。→http://tech.quartetcom.co.jp/2015/06/01/how-to-use-angularjs-controller-as/ なおas記法を特に推奨するような意見もあるようですが$scopeが悪いわけではありません。通常のAngularJSのControllerの使い方がもし分からなければ、それを先に理解してください。 Controllerのas記法は、Controllerを利用する際に$scopeを書かなくても利用できるような記法です。 ng-controller="TestController as test"は私が付け足したTestControllerというControllerをtestという名称で使うという意味です。ons-pageタグが閉じられるまでの間のタグでは全て、「test」という名前でTestControllerが利用できます。 ng-click="test.pushPage()"というコードがありますが、これはtestのpushPageメソッドを実行するということです。このように、ng-controllerが効いているタグ内ではtestという名称でTestControllerにアクセスすることができます。

terry3

2017/04/30 16:37

サンプルを基にしていてまだ理解が追い付いていない部分でした。わかりやすい説明ありがとうございます。

行動規範の内容に同意します