8954


Monaca  
ONSEN UI 1.2.2  
AngularJS 1.3

タイトルだけだとわかりにくいと思いますが下記のような動作を想定しています。

・ページA（起点ページ）pageAController  
フォームパーツなどがあり、ユーザーがデータを入力するページ。  
検索ボタンを押すとページBへ進む。

・ページB（ページAからしかこない）pageBController  
ページAから遷移され、外部APIから取得したjsonを展開しリスト表示。  
そのリストから目的のデータを選択(ng-clickでnavigator.popPage())してページAへ戻る。  
その際、ページAにはページBで選択したデータを反映したい。

調べてみたところ、異なるコントローラー間で共有する方法は3通り？あって  
・$rootScopeを使う方法  
・データ共有するサービスを作って双方でDIする  
・$on,$emit,$watchなどでデータの変化を伝搬させる？

ただ、これらはnavigator.popPage()（＝ブラウザバックと同意義）で戻った場合の挙動でも出来るのでしょうか？  
何かいいアドバイスありましたら教えていただけると助かります。


CC BY-SA 3.0
2015-04-05T21:23:02.097
8803
2018-07-09T07:12:36.837
7852
question
monaca onsen-ui angularjs
ONSEN UIのpopPage()で戻った場合に遷移前のデータを反映させたい


navigator.popPage()で戻った時にアイテムを渡す方法を記述します。

下記はOnsen
UI最小限のテンプレートを基に作ってみました。方法としてはeventのbroadcastを用いるのが一番手軽かと思います。page2.htmlでイベントを発行してpage1.htmlでイベントとアイテムの受信を行う方法を載せておきます。お役に立てると幸いです。

index.html

[code]

    <!DOCTYPE HTML>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <script src="components/loader.js"></script>
        <link rel="stylesheet" href="components/loader.css">
        <link rel="stylesheet" href="css/style.css">
        <script>
    
            var myApp = ons.bootstrap();
    
            myApp.controller('firstCtrl', function($scope) {
    
                $scope.$on('itemSelected', function(e, item) {
                    alert(item.id);
                });                
            });
    
            myApp.controller('secondCtrl', function($scope, $rootScope) {
    
                $scope.someObject = [
                  {name: "hoge" , id : 1},
                  {name: "fuga" , id : 2},
                  {name: "Onsen" , id : 3}, 
                  {name: "Monaca!" , id : 3}  
                ];
    
                $scope.passToPage1 = function(index) {
                    var selectedItem = $scope.someObject[index];
                    myNavigator.popPage();
                    $rootScope.$broadcast('itemSelected', selectedItem);
                }                
            });        
    
        </script>
    </head>
    <body>
        <ons-navigator var="myNavigator" page="page1.html">
        </ons-navigator> 
    </body>
    </html>
    
[/code]

page1.html

[code]

    <ons-page ng-controller="firstCtrl">
        <ons-toolbar>
            <div class="center">Navigator</div>
        </ons-toolbar>
    
        <div style="text-align: center">
            <br>
            <ons-button
                onclick="myNavigator.pushPage('page2.html')">
                Push Page 2
            </ons-button>
        </div>
    
    </ons-page>
    
[/code]

page2.html

[code]

    <ons-page ng-controller="secondCtrl">
        <ons-toolbar>
            <div class="left"><ons-back-button>Back</ons-back-button></div>
            <div class="center">Page 2</div>
        </ons-toolbar>
    
        <ons-list>
            <ons-list-item ng-repeat="item in someObject track by $index" ng-click="passToPage1($index)">{{item.name}}</ons-list-item>
        </ons-list>    
    
    </ons-page>
    
[/code]


CC BY-SA 3.0
2015-04-09T11:26:05.080
8954
2015-04-09T11:26:05.080
7871
8803
answer


こんな感じですか？

[code]

        ons.bootstrap()
        
        .controller('mainCtrl', function($scope, $window) {
            $scope.push = function() {
                app.navigator.pushPage('page.html');
            }
            $scope.pop = function(val) {
                $scope.val = val;
                app.navigator.popPage();
            }
        })
[/code]

[code]

    <link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/css/onsenui.css" rel="stylesheet"/>
    <link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/css/onsen-css-components.css" rel="stylesheet"/>
    <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/js/angular/angular.min.js"></script>
    <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/js/onsenui.min.js"></script>
    
      <body ng-controller="mainCtrl">
        <ons-navigator var="app.navigator">
          <ons-page>
            <ons-toolbar>
              <div class="center">Main</div>        
            </ons-toolbar>
            <p style="text-align: center">
              Selected Item: <span ng-if="!val">not selected</span><b ng-if="!!val">{{val}}</b>
            </p>
            <p style="text-align: center;">
              <ons-button ng-click="push()">Go to page</ons-button>
            </p>        
          </ons-page>
        </ons-navigator>
    
        <ons-template id="page.html">
          <ons-page>
            <ons-toolbar>
              <div class="left">
                <ons-back-button>Main</ons-back-button>
              </div>
              <div class="center">Page</div>
            </ons-toolbar>
            <ons-list>
              <ons-list-item modifier="tappable" ng-click="pop('Item1')">Item1</ons-list-item>
              <ons-list-item modifier="tappable" ng-click="pop('Item2')">Item2</ons-list-item>
              <ons-list-item modifier="tappable" ng-click="pop('Item3')">Item3</ons-list-item>
            </ons-list>
          </ons-page>
        </ons-template>
      </body>
[/code]


CC BY-SA 3.0
2015-04-10T07:13:07.883
8996
2015-04-10T07:13:07.883
3516
8803
answer


既に解決しているようですが、せっかくOnsen UIを使っていますので  
ナビゲーターのイベントが利用できます。

[Onsen UI Guide
ナビゲーターのイベント](http://ja.onsen.io/guide/overview.html#Navigationevents)  
Onsen UI自身がイベントをスローしていますので、自分で$broadcastする必要はありません。

値の引き渡しは直接はできないと思います。私はサービスを使ってやっています。


CC BY-SA 3.0
2015-06-05T09:50:30.333
11010
2015-06-05T09:50:30.333
9031
8803
answer