Passing Parameters to page
-
Hi,
I’m trying to pass parameters to another page using this Javascript method:
var content = document.getElementById('content'); content.load(page);
I don’t have a ons-navigation on my page since I’m using a ons-splitter, so the .PushPage() method doesn’t seem to work.
My index.html page
<ons-splitter> <ons-splitter-side page="views/menu.html" id="menu" side="left" width="220px" collapse swipeable> </ons-splitter-side> <ons-splitter-content id="content" page="home.html"></ons-splitter-content> </ons-splitter>
I saw that the .load() method accepts an [options] parameter:
From: https://onsen.io/v2/docs/js/ons-splitter-content.html#method-load
load(page, [options]): Promise
Show the page specified in page in the content.
Returns: Resolves to the new <ons-page> elementI have no idea what’s the [options] for or how to retrieve it on the other page.
Any help would great :)
Thanks!
-
@Riaz Check out this post: https://github.com/OnsenUI/OnsenUI/issues/1793
-
@Riaz The only component that implements a shortcut to pass data among pages is
ons-navigator
because its pages are supposed to clearly depend on one another.ons-splitter
only loads 1 page at a time and it is not supposed to depend on anything else, therefore it relies on the developer to organize the app state in the way he/she wants. You can use services, stores, etc.Otherwise, you can simply nest
ons-navigator
insideons-splitter-content
and use it normally.
-
@Fran-Diox I totally understand that from the link @munsterlander sent to me.
So I updated my code and this is what I now have:
<!-- SPLITTER --> <ons-page> <ons-splitter var="mySplitter"> <ons-splitter-side page="views/menu.html" id="menu" side="left" width="220px" collapse swipeable> </ons-splitter-side> <ons-splitter-content id="content" page="start.html"></ons-splitter-content> </ons-splitter> </ons-page> <ons-template id="start.html"> <ons-page id="start"> <ons-navigator id="myNavigator" page="home.html"></ons-navigator> </ons-page> </ons-template>
New JavaScript method to pushPage:
window.fn.load = function (page, data) { var content = document.getElementById('myNavigator'); var menu = document.getElementById('menu'); content.pushPage(page, data).then(menu.close.bind(menu)); };
This is how I call the new JavaScript method:
var options = { data: { title: 'Another Page' } }; fn.load("another_page.html", options);
How I try to retrieve the data passed through:
app.controller('AnotherPageCtrl', function ($scope, $http) { var model = this; model.init = function (event) { //DOES COME HERE model.title = event.target.data.title; //Supposed to be "Another Page" but it's an empty }; console.log(model.title); });
View:
<ons-page id="another-page" class="sub-page" ons-init="Ctrl3.init($event)" ng-controller="AnotherPageCtrl as Ctrl3"> ... </ons-page>
I can’t seem to retrieve the data thats being passed through to the page still.
-
Thanks for your help! I fixed the issue by retrieving the passed data like:
var params = myNavigator.topPage.data;
I also update my HTML:
<ons-page> <ons-splitter var="mySplitter"> <ons-splitter-side page="views/menu.html" id="menu" side="left" width="220px" collapse swipeable> </ons-splitter-side> <ons-splitter-content> <ons-navigator id="myNavigator" page="home.html"></ons-navigator> </ons-splitter-content> </ons-splitter> </ons-page>