onsenui ons-navigator内のpushPageでパラメータを渡したい

投稿者: Anonymous

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

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

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

よろしくお願いします。

解決

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

_x000D_

_x000D_

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

_x000D_

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

_x000D_

_x000D_

_x000D_

回答者: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *