15025


お世話になります。  
ons-toolbarでページ移行するappを開発中なのですが、

ons-listから詳細ページに移行する際にパラメータを渡したいのですが、  
urlにパラメータを付加することは可能でしょうか？  
またその際移行先のページでのパラメータの呼び出しはどのようにすれば良いのでしょうか？

urlパラメータが使えない場合はページ移行の際に変数を送る方法はありましたらご教示いただけると幸いです。

よろしくお願いします。


CC BY-SA 3.0
2015-08-30T00:52:46.643
15022
2015-08-30T03:51:16.640
2015-08-30T03:51:16.640
11129
11129
question
monaca onsen-ui
onsenui ons-navigator内のpushPageでパラメータを渡したい


URLにパラメータを渡すやり方はうまくいかないと思います。  
代わりに、`pushPage()`の第二引数にオプションを渡し、目的ページで`getCurrentPage()`を呼んで受け取る方法があります。

[code]

    ons.bootstrap()
    .controller('listController', function($scope){
      $scope.items = [
        {id: 1, title: 'item1'},
        {id: 2, title: 'item2'},
        {id: 3, title: 'item3'},
        {id: 4, title: 'item4'},
      ];
    })
    .controller('detailController', function($scope){
      var options = $scope.nav.getCurrentPage().options;
      $scope.item = options.item;
    });
[/code]

[code]

    <link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/css/onsen-css-components.css" rel="stylesheet"/>
    <link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/css/onsenui.css" rel="stylesheet"/>
    <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/js/angular/angular.min.js"></script>
    <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/js/onsenui.min.js"></script>
    
    <ons-navigator page="list.html" var="nav"></ons-navigator>
    
    <ons-template id="list.html">
      <ons-page ng-controller="listController">
        <ons-toolbar>
          <div class="left"><ons-back-button>Back</ons-back-button></div>
          <div class="center">list</div>
        </ons-toolbar>
        <ons-list>
          <ons-list-item ng-repeat="item in items" ng-click="nav.pushPage('detail.html', {item: item})">
            {{item.title}}
          </ons-list-item>
        </ons-list>
      </ons-page>
    </ons-template>
    
    <ons-template id="detail.html">
      <ons-page ng-controller="detailController">
        <ons-toolbar>
          <div class="left"><ons-back-button>Back</ons-back-button></div>
          <div class="center">{{item.title}}</div>
        </ons-toolbar>
      </ons-page>
    </ons-template>
[/code]


CC BY-SA 3.0
2015-08-30T03:01:45.780
15025
2015-08-30T03:01:45.780
8532
15022
answer