###実現したいこと
開発環境は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'); } })
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/03/07 04:04
2017/03/07 10:01 編集
2017/03/07 10:12
2017/04/14 03:52