monaca ons-toolbarの中身を動的に変更したい

###前提・実現したいこと
現在、monaca(2.0.0-rc.1)を利用してアプリを開発中、angularjs(1.4.3)を利用しています。
ons-toolbarをヘッダーに利用したいと考えておりますが、ons-navigatorでpushPageした際、
コンテンツ自体は遷移アニメーションを行い、ヘッダー自体はアニメーションさせず、ボタン等のons-toolbar内のコンテンツを変更させたいです。

###試したこと
<ons-toolbar>
...
</ons-toolbar>
<ons-navigator>
...
</ons-navigator>

という書き方で、ページのコンテンツのみ遷移させています。

1.controllerでons-toolbarの中身を動的に変更
→ons-toolbarがcontrollerのスコープ外になってしまい変更できませんでした。

2.ons-toolbarをng-includeさせ、呼び出すテンプレート自体を動的に変更
→ng-includeで変数が使えませんでした。

###補足情報(言語/FW/ツール等のバージョンなど)
monaca(2.0.0-rc.1)
angularjs(1.4.3)

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

回答1件

ベストアンサー

controllerを入れ子にしてあげてはどうでしょうか

サンプルリンク

html
1<html>
2 <head>
3  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.min.js"></script>  
4  <script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.0.0-alpha.15/js/onsenui.min.js"></script>
5  <script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.0.0-alpha.15/js/angular-onsenui.min.js"></script>   
6  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.0.0-alpha.15/css/onsenui.min.css" />
7  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.0.0-alpha.15/css/onsen-css-components.min.css" />
8  <script>
9    var app = ons.bootstrap();
10    app.controller('flame',function($window, $scope){
11      $scope.title = 'home';
12
13      // ページが切り替わるとtoolbarの文字も切り替わる
14      $window.addEventListener('show', function(e) {
15        $scope.title = e.target.id;
16        $scope.$apply();
17      }, false);
18    });
19    
20    app.controller('page1',function($rootScope, $scope){
21      // no code
22    });
23    app.controller('page2',function($rootScope, $scope){
24      // no code
25    });
26  </script>
27  </head>
28  <body>
29    <ons-page id="flame" ng-controller="flame">
30      <ons-toolbar>
31        <div class="center" ng-bind="title"></div>
32      </ons-toolbar>
33      <ons-navigator title="Navigator" var="myNavigator">
34        <div style="text-align: center">
35          <br>
36          <ons-button modifier="light" onclick="myNavigator.pushPage('page1.html', { animation : 'slide' } )">
37            goto Page1
38          </ons-button>
39        </div>
40      </ons-navigator>
41    </ons-page>
42    
43    <ons-template id="page1.html">
44      <ons-page id="page1" ng-controller="page1">
45        <div style="text-align: center">
46          <br>
47          <ons-button modifier="light" onclick="myNavigator.pushPage('page2.html', { animation : 'slide' } )">
48            goto Page2
49          </ons-button>
50        </div>
51      </ons-page>
52    </ons-template>
53  
54    <ons-template id="page2.html">
55      <ons-page id="page2" ng-controller="page2">
56
57        <div style="text-align: center">
58          <br>
59          <ons-button modifier="light" onclick="myNavigator.popPage()">
60            Pop Page
61          </ons-button>
62        </div>
63      </ons-page>
64    </ons-template>
65  </body>
66</html>