Q&AAngularJSをMonaca上で使っている者です。
ページをわけておいた際の実装の仕方が解りません。
例
index.html <html ng-app="myApp"> <head>...割愛 <script> var app = angular.module('myApp', ['onsen']); app.controller('AppController', function($scope) { this.load = function(page) { $scope.splitter.content.load(page); $scope.splitter.left.close(); }; this.toggle = function() { $scope.splitter.left.toggle(); }; }) </script> </head> <body> <ons-navigator var="myNavigator" page="page1.html"></ons-navigator> </body> </html>
page1.html <html ng-app="page1"> <ng-include src="'page1.html'" ></ng-include> <ons-template id="page1.html"> <body ng-controller="mycre"> <ons-page> {{msg}} </ons-page> </body> </html>
このようにした場合page1のng-appを読み込ませ、モジュールを定義する場合はどうすればいいのでしょうか、お力を貸してください。
回答2件
0
もう解決されているようなのですが、HTMLやng-includeは無くても動作しませんでしょうか。
HTMLタグやbodyタグは分割ファイルには不要かもしれません。
ng-controllerを定義しても動作しないのはその関連である可能性も。
あまりこのあたりの挙動を熟知しているわけではないため、何故以下コードで動くのかが説明できるわけではありませんが、分割後のHTMLファイルには公式リファレンス上のons-template内の内容を記述するというような理解で良いように思います。
ons-template内にHTMLタグやbodyタグはありませんので、分割後のHTMLファイルでも同様に無効なのだと思われます。
HTML
1<html ng-app="myApp"> 2<head>...割愛 3<script> 4 var app = angular.module('myApp', ['onsen']); 5 app.controller('AppController', function($scope) { 6 this.load = function(page) { 7 $scope.splitter.content.load(page); 8 $scope.splitter.left.close(); 9 }; 10 this.toggle = function() { 11 $scope.splitter.left.toggle(); 12 }; 13 }) 14</script> 15</head> 16 17<body> 18 <ons-navigator var="myNavigator" page="page1.html"></ons-navigator> 19</body> 20</html>
HTML
1<ons-page ng-controller="mycre"> 2 {{msg}} 3</ons-page>
投稿2017/04/04 23:32
総合スコア1947
0
自己解決
色々なサイトを探していたらこちらのサイトにつきまして、自分の実装ではons-pageにng-cont。。をつける事で解決致しました。
http://angularjsninja.com/blog/2013/11/19/angularjs-nginclude/
投稿2017/04/04 18:06
総合スコア422
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。