質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.53%

  • Monaca

    1091questions

    「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

  • AngularJS

    597questions

    AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

  • Onsen UI

    353questions

    HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,113

degu

score 8

実現したいこと

開発環境は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は存在していません。

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

再現コード(追記)

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');
    }
})
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

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

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/03/07 13:04

    早速のコメント誠にありがとうございます。
    再現コードについては、情報足らずで申し訳ありませんでした。一部にはなりますが、追記いたしました。

    私が正確に理解していなかったら大変申し訳ありませんが、1、2について回答いたします。

    1.controllerは動作しているように思います。ng-repeatの外でテスト用のscopeを作成し、表示してみたところ問題なく表示されました。

    2.こちらについてもシンプルな構造にした場合動作致します。
    試した構造はタブバーからスライディングメニューを取り除き、ons-tab要素に直接ng-repeatが実装されているページを読み込む。

    キャンセル

  • 2017/03/07 18:48 編集

    1.2.に回答ありがとうございます。ということはやはりその構造のときのみ、何か問題が発生するようですね。私見後述しますが、なかなか難しそうですのでMonaca提供元への問い合わせも検討されるか、タブバー+スライディングメニューの構造を見直してシンプルにするほうが良いかもしれません。

    コード拝見しました。申し訳ありませんが、JavaScript部分の情報をもう少しいただきたく・・・ng-repeatの子要素はList1Controllerのcallbooklistを参照していると思いますが、app.jsにはcallbooklistがありません。SharedDataサービスの正体も不明です。
    見たところ、controllerの初期化時にSharedDataサービスからリストの設定をしているようですので、初期化時の動作がどのようになっているかを掴むことがまずポイントかと思います。

    現時点では何が真の原因なのか把握できませんが、{{scope}}のように表示されるのは、JavaScriptが正常に動作していないために、HTMLにコーディングした文字列がそのまま表示されている、というのが経験則では最も多いです。(例えば初期化時に値が入るはずの変数がundefinedになっており、その子要素を参照しようとしてエラーが発生している)
    ですので私見ですが何らかの真の要因によりJavaScriptが上手く動作していないことがその表示内容の原因ではないかと予想しています。

    そのコーディングで更に私が原因追求するのであれば、まずcallbooklistに値が入っているかを確認します。値が入った上でng-repeatが動作しないのであれば、次はその原因調査に入ることができます。

    また、これは差し出がましい意見になりますが、タブバーの下にスライディングメニューがあり、更にスライディングメニューのメインページにons-navigatorがありますね。この構造には、何か意図がありますでしょうか?

    キャンセル

  • 2017/03/07 19: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)

    キャンセル

  • 2017/04/14 12:52

    回答が遅くなり大変申し訳ありません。
    根本原因は解決していませんが、<ons-sliding-menu>から<ons-splitter-side>に変更したところ、解決いたしました。

    ひとまずアプリとしては問題なく動作しています。遅くなりましたが、共有いたします。

    キャンセル

同じタグがついた質問を見る

  • Monaca

    1091questions

    「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

  • AngularJS

    597questions

    AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

  • Onsen UI

    353questions

    HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。