ons-tabbar内にons-sliding-menuを実装すると、AngularJSの$Scopeが表示されない

###実現したいこと
開発環境はMonacaでAngularJS及びOnsenUI v2.0.5を利用し、スマートフォン向けアプリの開発を行なっております。
タブバー型のアプリに対して、タブ内にスライディングメニューを入れ込み、そのスライディングメニュー内のページにAngularJsのng-repeatを用いて動的なリストを作成したいと思っています。

###発生している問題
iOS上での実機デバック(Monacaデバッカー),safari上でのプレビュー画面で、AngularJSのスコープが読み込まれていないようで、{{scope}}のように表示されてしまいます。

Android上での実機デバック及び、chrome上でのプレビュー画面では正常に動作しております。

###試したこと
また両者の切り分けを行なってみたところ、正常に動いている方は、ons-list-itemの子要素に当たるDiv要素にng-bindingクラスが定義されており、失敗している方にはons-list-itemに直接ng-bindingクラスが定義され、div要素にはng-bindingは存在していません。

上記の問題について何か解決策はございますでしょうか？
いずれも今年の１月から勉強しだした初心者で、質問の内容に不備等がございましたら申し訳無いのですが、何卒よろしくお願いいたします。

###再現コード（追記)
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>
  <script src="lib/angular/angular.js"></script>
  <script src="lib/onsenui/js/onsenui.min.js"></script>
  <script src="lib/onsenui/js/angular-onsenui.js"></script>
  <script src="js/app.js"></script>
  <script src="js/localStorage.js"></script>
  <script src="js/jquery-3.1.1.min.js"></script>
  <script src="js/jquery-ui.min.js"></script>
  <script src="js/jquery.ui.touch-punch.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">
  <link rel="stylesheet" href="css/jquery-ui.min.css">

</head>
<body>

  <ons-page ng-controller="HomeController">
    <ons-tabbar position="bottom" id="tab" var="tab">
      <ons-tab page="sliding-menu.html" label="sliding-menu" icon="square" active></ons-tab>
      <ons-tab page="tab1.html" label="tab1" icon="square"></ons-tab>
      <ons-tab page="tab2.html" label="tab2" icon="square"></ons-tab>
    </ons-tabbar>
  </ons-page>



</body>
</html>

sliding-menu.html

    <ons-sliding-menu 
    main-page="List1.html" 
    menu-page="menu.html" 
    side="left" 
    max-slide-distance="250px" 
    var="menu">
    </ons-sliding-menu>
</ons-page>

menu.html

<ons-page>
    <ons-list>
        <ons-list-item 
        modifier="chevron" 
        onclick="menu.setMainPage('LIST1.html', {closeMenu: true})">
            LIST1
        </ons-list-item>
        <ons-list-item 
        modifier="chevron" 
        onclick="menu.setMainPage('LIST2.html', {closeMenu: true})">
            LIST2
        </ons-list-item>
        <ons-list-item 
        modifier="chevron" 
        onclick="menu.setMainPage('LIST3.html', {closeMenu: true})">
            LIST3
        </ons-list-item>
        <ons-list-item 
        modifier="chevron" 
        onclick="menu.setMainPage('LIST4.html', {closeMenu: true})">
            LIST4
        </ons-list-item>
    </ons-list>
</ons-page>

LIST1.html

<ons-navigator var="nameNav">
<ons-page id="namepage" ng-controller="List1Controller">
    <ons-toolbar>
        <div class="center">LIST1</div>
    </ons-toolbar>
    <ons-list >
        <div ng-repeat="namelist in callbooklist">
            <ons-list-item 
            ng-click="toggleGroup(namelist)"
            modifier="tappable"
            class="title"
             ng-class="{active:isGroupShown(namelist)}">
                {{namelist.Head}}行
            </ons-list-item>
            <ons-list-item 
            ng-repeat="datalist in namelist.data"
            class="item-accordion"
            ng-show="isGroupShown(namelist)"
            ng-click="showDetailPage(datalist)">
                {{datalist.name}}
            </ons-list-item>
        </div>
    </ons-list>
</ons-page>
</ons-navigator>

app.js(一部)

app.controller('List1Controller',function($scope,SharedData){
    
    
    var List = SharedData.get();
    var namelist = List.data;

    // ソート
    var SortList = setNameHead(namelist);
    $scope.list = SortList;
    
    
    
    /*トグル処理*/
    $scope.toggleGroup = function(namelist){
        if($scope.isGroupShown(namelist)){
            $scope.shownGroup = null;
        }
        else
        {
            $scope.shownGroup = namelist;
        }
    }
    /*？？？処理*/
    $scope.isGroupShown = function(namelist){
        return $scope.shownGroup === namelist;
    }
    /*詳細ページ表示処理*/
    $scope.showDetailPage = function(data){
        SharedData.detailset(data);
        nameNav.pushPage('Detail.html');
    }
})

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

回答1件

ベストアンサー

再現するコードがあれば回答し易いかと思います。
質問内容から読み取ると、{{scope}}のように表示されてしまうのはng-repeatが適用されたons-listの子要素であるons-list-itemということで宜しいでしょうか？

お聞きしたいのは以下です。

１．ons-list以外のAngularJSのcontrollerは動作しているか → 例えば利用しているプラグインがAndroidとiOSで呼び出し方が違っており、初期化時にiOS側のみエラーになっていて、JavaScriptの初期化が上手くできていないようなことはないか。（動作しないのはons-listに限らない）

２．タブバー、スライディングメニューを使用せずにリスト表示のみにすると動作するか → 現状は色々と入れ子になっているはずなので、シンプルな階層にしたら動作するか

投稿2017/03/06 09:10

akabee

総合スコア1947

degu

2017/03/07 04:04

早速のコメント誠にありがとうございます。再現コードについては、情報足らずで申し訳ありませんでした。一部にはなりますが、追記いたしました。私が正確に理解していなかったら大変申し訳ありませんが、１、２について回答いたします。１．controllerは動作しているように思います。ng-repeatの外でテスト用のscopeを作成し、表示してみたところ問題なく表示されました。２．こちらについてもシンプルな構造にした場合動作致します。試した構造はタブバーからスライディングメニューを取り除き、ons-tab要素に直接ng-repeatが実装されているページを読み込む。

akabee

2017/03/07 10:01 編集

１．２．に回答ありがとうございます。ということはやはりその構造のときのみ、何か問題が発生するようですね。私見後述しますが、なかなか難しそうですのでMonaca提供元への問い合わせも検討されるか、タブバー＋スライディングメニューの構造を見直してシンプルにするほうが良いかもしれません。コード拝見しました。申し訳ありませんが、JavaScript部分の情報をもう少しいただきたく・・・ng-repeatの子要素はList1Controllerのcallbooklistを参照していると思いますが、app.jsにはcallbooklistがありません。SharedDataサービスの正体も不明です。見たところ、controllerの初期化時にSharedDataサービスからリストの設定をしているようですので、初期化時の動作がどのようになっているかを掴むことがまずポイントかと思います。現時点では何が真の原因なのか把握できませんが、{{scope}}のように表示されるのは、JavaScriptが正常に動作していないために、HTMLにコーディングした文字列がそのまま表示されている、というのが経験則では最も多いです。（例えば初期化時に値が入るはずの変数がundefinedになっており、その子要素を参照しようとしてエラーが発生している）ですので私見ですが何らかの真の要因によりJavaScriptが上手く動作していないことがその表示内容の原因ではないかと予想しています。そのコーディングで更に私が原因追求するのであれば、まずcallbooklistに値が入っているかを確認します。値が入った上でng-repeatが動作しないのであれば、次はその原因調査に入ることができます。また、これは差し出がましい意見になりますが、タブバーの下にスライディングメニューがあり、更にスライディングメニューのメインページにons-navigatorがありますね。この構造には、何か意図がありますでしょうか？

akabee

2017/03/07 10:12

追記します。今気づいたのですが、ons-listの要素の入れ方が、以下のようになっていますね。 ons-list 　└div (ng-repeat) 　　├ons-list-item 　　└ons-list-item (ng-repeat) 上記動作がOnsenUIとしてサポートされているのかどうかが分かりません。基本的には、ons-listの子要素はons-list-headerかons-list-itemになるべきかと思います。→参考：https://ja.onsen.io/v2/docs/angular1/ons-list-item.html それで解決するかどうかは分からないのですが、リストの入れ子が必要であれば、以下のような構造に変更してみてはどうでしょうか？ ons-list 　└ons-list-item (ng-repeat) 　　└ons-list 　　　└ons-list-item (ng-repeat)

degu

2017/04/14 03:52

回答が遅くなり大変申し訳ありません。根本原因は解決していませんが、<ons-sliding-menu>から<ons-splitter-side>に変更したところ、解決いたしました。ひとまずアプリとしては問題なく動作しています。遅くなりましたが、共有いたします。

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