ons-popover 内で ons-scrollerが使えない


ons-popover内にons-listを使用していくつかの機能を提供する、ドロップダウンメニューを作っています。 メニューの項目数が多いので、ons-
scrollerでスクロールさせたいのですが、スクロールが機能せず、一部分のみしか表示されません。低い解像度の端末でも表示できるよう、スクロール機能を付けたいのですが、どのようにすればよいのでしょうか？

[code]

    ons.bootstrap();
    ons.ready(function(){
      onReady();
    });
    
    function onReady(){
      ons.createPopover("PopOver.html");
    }
    
    function PopOverShowBtn(Target){
      var options={
        animation : "none"
      };
      PopOver.show(Target,options);
    
    }
[/code]

[code]

    <ons-navigator var="app_navi">
    
      <ons-page id="TopPage">
        <ons-button onclick="PopOverShowBtn(this);">ポップオーバー表示</ons-button>
      </ons-page>
    </ons-navigator>
    
    <ons-template id="PopOver.html">
      <ons-popover var="PopOver" cancelable style='width:300px'>
        <ons-scroller style="width:100%;height:400px;">
          <ons-list style="text-align:center">
            <ons-list-item modifier='tappable'>項目１</ons-list-item>
            <ons-list-item modifier='tappable'>項目２</ons-list-item>
            <ons-list-item modifier='tappable'>項目３</ons-list-item>
            <ons-list-item modifier='tappable'>項目４</ons-list-item>
            <ons-list-item modifier='tappable'>項目５</ons-list-item>
            <ons-list-item modifier='tappable'>項目６</ons-list-item>
            <ons-list-item modifier='tappable'>項目７</ons-list-item>
            <ons-list-item modifier='tappable'>項目８</ons-list-item>
            <ons-list-item modifier='tappable'>項目９</ons-list-item>
            <ons-list-item modifier='tappable'>項目１０</ons-list-item>
            <ons-list-item modifier='tappable'>項目１１</ons-list-item>
            <ons-list-item modifier='tappable'>項目１２</ons-list-item>
            <ons-list-item modifier='tappable'>項目１３</ons-list-item>
            <ons-list-item modifier='tappable'>項目１４</ons-list-item>
            <ons-list-item modifier='tappable'>項目１５</ons-list-item>
    
          </ons-list>
        </ons-scroller>
      </ons-popover>
    </ons-template>
[/code]




自己解決できましたので、要点をまとめておきます。

問題点（調査中に発見した問題点を含む）  
・Ons-Popover内のOns-Scrollerが機能しない。  
・コンソール画面に「Onsen UI require jqLite. Load jQuery after loading AngularJS to fix
this error. jQuery may break Onsen UI
behavior.」と警告があった。(jQueryとOnsenUI(AngularJs)の併用、ロードの順番に関する警告)

対処法  
・loader.jsファイルの削除  
・必要なJSコンポーネントの再インストール

これにより、loader.jsが再作成され、警告の解消、Scrollerも機能するようになりました。

※loadr.jsの働きを良く理解していないため、削除によって及ぶ影響があるのかもしれません。乱暴な方法かもしれませんが、今のところ問題なく（ビルドも試しました）動作しています。




自己解決できましたので、要点をまとめておきます。

問題点（調査中に発見した問題点を含む）  
・Ons-Popover内のOns-Scrollerが機能しない。  
・コンソール画面に「Onsen UI require jqLite. Load jQuery after loading AngularJS to fix
this error. jQuery may break Onsen UI
behavior.」と警告があった。(jQueryとOnsenUI(AngularJs)の併用、ロードの順番に関する警告)

対処法  
・loader.jsファイルの削除  
・必要なJSコンポーネントの再インストール

これにより、loader.jsが再作成され、警告の解消、Scrollerも機能するようになりました。

※loadr.jsの働きを良く理解していないため、削除によって及ぶ影響があるのかもしれません。乱暴な方法かもしれませんが、今のところ問題なく（ビルドも試しました）動作しています。

