

初歩的な質問かもしれませんが、ご教授お願いいたします。

monacaでアプリ製作を考えています。  
monacaの「master-detail」テンプレートを元にプロジェクトを作成しようと思っています。

データバインディングの観点からng-controllerを記述したいのですが、

`<ons-page>` に `ng-controller="newCtrl"` と記述し、  
iPhoneのmonacaデバッガーで確認したところ、表示が崩れてしまい  
クリックで詳細ページに飛ぶこともできません。

`<ons-page>` を `<div>` でくくり、 `<div ng-controller="newCtrl">` としても結果は同じでした。

[code]

    <!DOCTYPE HTML>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
      <script src="components/loader.js"></script>
      <link rel="stylesheet" href="components/loader.css">
      <link rel="stylesheet" href="css/style.css">
      <script src="js/app.js"></script>
      <script>
        ons.bootstrap();
    
      </script>
      <style>
        .item {
          padding: 10px;
          line-height: 1;
        }
        .item-thum {
          background-color: #ccc;
          width: 50px;
          height: 50px;
          border-radius: 4px;
        }
        .item-title {
          font-size: 15px;
          font-weight: 500;
        }
        .item-desc {
          font-size: 14px;
          color: #666;
          line-height: 1.3;
          margin: 4px 0 0 0;
          padding: 0 30px 0 0;
        }
        .item-label {
          font-size: 12px;
          color: #999;
          float: right;
        }
      </style>
    </head>
    
    
    <body>    
    
      <ons-navigator page="list.html" var="app.navi"></ons-navigator>
    
      <ons-template id="list.html">
        <ons-page id="list-page" ng-controller="newctrl">
          <ons-toolbar>
            <div class="center">Master Details</div>
          </ons-toolbar>
    
          <ons-list>
    
            <ons-list-item modifier="chevron" class="item">
              <ons-row>
                <ons-col width="60px"> 
                  <div class="item-thum"></div>
                </ons-col>
                <ons-col>
                  <header>
                    <span class="item-title">Item Title</span>
                    <span class="item-label">4h</span>
                  </header>
                  <p class="item-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </ons-col>
              </ons-row>                          
            </ons-list-item>
    
            <ons-list-item modifier="chevron" class="item">
              <ons-row>
                <ons-col width="60px"> 
                  <div class="item-thum"></div>
                </ons-col>
                <ons-col>
                  <header>
                    <span class="item-title">Another Item Title</span>
                    <span class="item-label">6h</span>
                  </header>
                  <p class="item-desc">Ut enim ad minim veniam.</p>
                </ons-col>
              </ons-row>                          
            </ons-list-item>
    
            <ons-list-item modifier="chevron" class="item">
              <ons-row>
                <ons-col width="60px"> 
                  <div class="item-thum"></div>
                </ons-col>
                <ons-col>
                  <header>
                    <span class="item-title">Yet Another Item Title</span>
                    <span class="item-label">1day ago</span>
                  </header>
                  <p class="item-desc">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                </ons-col>
              </ons-row>                          
            </ons-list-item>
          </ons-list>
        </ons-page>
      </ons-template>
    
      <ons-template id="detail.html">
        <ons-page id="detail-page">
    
          <ons-toolbar>
            <div class="left"><ons-back-button>Back</ons-back-button></div>
            <div class="center">Details</div>
          </ons-toolbar>
    
          <ons-list modifier="inset" style="margin-top: 10px">
            <ons-list-item class="item">
              <ons-row>
                <ons-col width="60px"> 
                  <div class="item-thum"></div>
                </ons-col>
                <ons-col>
                  <header>
                    <span class="item-title">Title</span>
                    <span class="item-label">Foobar</span>
                  </header>
                  <p class="item-desc">desc</p>
                </ons-col>
              </ons-row>
            </ons-list-item>
    
            <ons-list-item modifier="chevron" id="add-note-action" class="add-note-action-item">
              <ons-icon icon="ion-chatboxes" fixed-width="true" style="color: #ccc"></ons-icon>
              Add a note
            </ons-list-item>
          </ons-list>
    
          <ons-list style="margin-top: 10px">
            <ons-list-item class="item">
              <header>
                <span class="item-title">Lorem ipsum dolor sit amet</span>
              </header>
              <p class="item-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </ons-list-item>
            <ons-list-item class="item">
              <header>
                <span class="item-title">Lorem ipsum dolor sit amet</span>
              </header>
              <p class="item-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </ons-list-item>
            <ons-list-item class="item">
              <header>
                <span class="item-title">Lorem ipsum dolor sit amet</span>
              </header>
              <p class="item-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </ons-list-item>
          </ons-list>
    
          <br>
    
        </ons-page>
      </ons-template>
    
    </body>
    
    </html>
    
[/code]

理想はng-controllerの記述をしても表示が崩れない、クリックが機能することです。  
解決策ご教授いただければ幸いです。  
よろしくお願いいたします。


CC BY-SA 3.0
2015-03-21T15:37:51.077
8222
2015-08-20T06:10:57.917
2015-03-22T00:56:01.180
8000
8960
question
monaca angularjs
monacaのmaster-detailテンプレートにng-controllerを追加すると表示が崩れる


ヘッダーをこんな感じにしてあげたらうまくいくんじゃないかと思います。

[code]

    <script>
      ons.bootstrap()
      .controller('newCtrl', function($scope) {
        $scope.pageTitle = "Page Title";
      });
    </script>
    
[/code]

一応サンプルです（detailの遷移はできなかったので見やすくするために端折ってます）。  
※ここではdetailへの遷移は再現できませんでしたが、デバッガでは確認できました。

[code]

    <head>
        <link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.2.2/build/css/onsenui.css" rel="stylesheet"/>
        <link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.2.2/build/css/onsen-css-components.css" rel="stylesheet"/>
        <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.2.2/build/js/angular/angular.min.js"></script>
        <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.2.2/build/js/onsenui.min.js"></script>
        <script>
          ons.bootstrap()
          .controller('newCtrl', function($scope) {
            $scope.pageTitle = "Master Details";
          });
        </script>
      <style>
        .item {
          padding: 10px;
          line-height: 1;
        }
        .item-thum {
          background-color: #ccc;
          width: 50px;
          height: 50px;
          border-radius: 4px;
        }
        .item-title {
          font-size: 15px;
          font-weight: 500;
        }
        .item-desc {
          font-size: 14px;
          color: #666;
          line-height: 1.3;
          margin: 4px 0 0 0;
          padding: 0 30px 0 0;
        }
        .item-label {
          font-size: 12px;
          color: #999;
          float: right;
        }
      </style>
    </head>
    
    <body>    
    
      <ons-navigator page="list.html" var="app.navi"></ons-navigator>
    
      <ons-template id="list.html">
        <ons-page id="list-page" ng-controller="newCtrl">
          <ons-toolbar>
            <div class="center">{{pageTitle}}</div>
          </ons-toolbar>
    
          <ons-list>
    
            <ons-list-item modifier="chevron" class="item">
              <ons-row>
                <ons-col width="60px"> 
                  <div class="item-thum"></div>
                </ons-col>
                <ons-col>
                  <header>
                    <span class="item-title">Item Title</span>
                    <span class="item-label">4h</span>
                  </header>
                  <p class="item-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </ons-col>
              </ons-row>                          
            </ons-list-item>
    
            <ons-list-item modifier="chevron" class="item">
              <ons-row>
                <ons-col width="60px"> 
                  <div class="item-thum"></div>
                </ons-col>
                <ons-col>
                  <header>
                    <span class="item-title">Another Item Title</span>
                    <span class="item-label">6h</span>
                  </header>
                  <p class="item-desc">Ut enim ad minim veniam.</p>
                </ons-col>
              </ons-row>                          
            </ons-list-item>
    
            <ons-list-item modifier="chevron" class="item">
              <ons-row>
                <ons-col width="60px"> 
                  <div class="item-thum"></div>
                </ons-col>
                <ons-col>
                  <header>
                    <span class="item-title">Yet Another Item Title</span>
                    <span class="item-label">1day ago</span>
                  </header>
                  <p class="item-desc">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                </ons-col>
              </ons-row>                          
            </ons-list-item>
          </ons-list>
        </ons-page>
      </ons-template>
    
      <ons-template id="detail.html">
        <ons-page id="detail-page">
        </ons-page>
      </ons-template>
    
    </body>
[/code]


CC BY-SA 3.0
2015-03-22T05:45:02.017
8229
2015-03-22T05:45:02.017
3516
8222
answer