ons-navigatorで複数ページを利用する場合に、それぞれのページ間で値を受け渡すのには、苦労するというほどではありませんが、利用可能な選択肢の中からプロジェクトで使う方法を決めるのに多少時間がかかるかもしれません。
ng-controllerすら利用していない段階では余計に混乱させてしまうかもしれませんが、お勧めなのはAngularJSのServiceを用いる方法です。
各ページのng-controllerで値を受け渡すためのServiceを依存性注入し、各ページで共有したい値はそのServiceに設定しておくようにします。
具体例が欲しい場合は仰ってください。
■以下追記 具体的な動作例
index.html
html
1 <! DOCTYPE HTML >
2 < html ng-app = " app " >
3 < head >
4 < meta charset = " utf-8 " >
5 < meta name = " viewport " content = " width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no " >
6 < meta http-equiv = " Content-Security-Policy " content = " default-src * data:; style-src * ' unsafe-inline ' ; script-src * ' unsafe-inline ' ' unsafe-eval ' " >
7 < script src = " components/loader.js " > </ script >
8 < script src = " lib/angular/angular.min.js " > </ script >
9 < script src = " lib/onsenui/js/onsenui.min.js " > </ script >
10 < script src = " lib/onsenui/js/angular-onsenui.min.js " > </ script >
11
12 < link rel = " stylesheet " href = " components/loader.css " >
13 < link rel = " stylesheet " href = " lib/onsenui/css/onsenui.css " >
14 < link rel = " stylesheet " href = " lib/onsenui/css/onsen-css-components.css " >
15 < link rel = " stylesheet " href = " css/style.css " >
16
17 < script >
18
19 var app = angular . module ( "app" , [ "onsen" ] )
20
21 angular . module ( "app" )
22 . controller ( 'page1Controller' , function ( shareService ) {
23
24 this . test = function ( ) {
25 alert ( shareService . getTestValue ( ) )
26 }
27
28 } ) ;
29
30 angular . module ( "app" )
31 . controller ( 'page2Controller' , function ( shareService ) {
32
33 this . testVaue = shareService . getTestValue ( )
34
35 this . test = function ( ) {
36 shareService . setTestValue ( this . testVaue )
37 }
38
39 } ) ;
40
41 angular . module ( "app" )
42 . service ( "shareService" , function ( ) {
43 this . testValue = false
44
45 this . setTestValue = function ( val ) {
46 this . testValue = val
47 }
48 this . getTestValue = function ( ) {
49 return this . testValue
50 }
51 } ) ;
52
53 ons . ready ( function ( ) {
54 console . log ( "Onsen UI is ready!" ) ;
55 } ) ;
56 </ script >
57 </ head >
58 < body >
59
60 < ons-page >
61
62 < ons-tabbar >
63 < ons-tab label = " Tab 1 " page = " page1Navi.html " active > </ ons-tab >
64 </ ons-tabbar >
65
66 </ ons-page >
67
68 </ body >
69 </ html >
page1Navi.html
html
1 < ons-navigator var = " page1Navi " page = " page1.html " >
2 </ ons-navigator >
page1.html
html
1 < ons-page ng-controller = " page1Controller as page1C " >
2 < ons-list id = " pushList " >
3 < ons-list-item ng-click = " page1Navi.pushPage( ' page2.html ' ) " > test1 </ ons-list-item >
4 < ons-list-item ng-click = " page1C.test() " > alert </ ons-list-item >
5 </ ons-list >
6 </ ons-page >
page2.html
html
1 < ons-page ng-controller = " page2Controller as page2C " >
2 < ons-toolbar >
3 < ons-toolbar-button id = " backButton " onclick = " page1Navi.popPage() " >
4 back
5 </ ons-toolbar-button >
6 </ ons-toolbar >
7
8 < ons-list >
9 < ons-list-item >
10 < ons-input type = " checkbox " ng-model = " page2C.testVaue " ng-change = " page2C.test() " >
11 </ ons-input >
12 </ ons-list-item >
13 </ ons-list >
14 </ ons-page >
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/06/11 08:19
2017/06/11 12:19
2017/06/15 04:53 編集