1

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()(=ブラウザバックと同意義)で戻った場合の挙動でも出来るのでしょうか?
何かいいアドバイスありましたら教えていただけると助かります。

3 件の回答 3

1

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

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

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">
    <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>

page1.html

<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>

page2.html

<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>
1
  • ありがとうございます。 まさに意図していた使い方です。 broadcastの使い方がいまいちわかってなかったので、これは助かります。 Middleさんの回答を参考に進めさせていただきます。 Commented 2015年4月12日 13:34
1

こんな感じですか?

    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();
        }
    })
<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>

1
  • 返信遅くなりすみません。 どちらかというとコントローラーとページがそれぞれ別に存在しているイメージなので、同コントローラー内の場合は問題なく動作するのです。 サンプルコードを提示出来ず申し訳ありません。 Commented 2015年4月12日 13:33
0

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

Onsen UI Guide ナビゲーターのイベント
Onsen UI自身がイベントをスローしていますので、自分で$broadcastする必要はありません。

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

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。