PUSH ELEMENT TO TABBAR PAGE
-
I have the main page with a list of items.
When you select an item I want it to be another page with two tabs.Each item has event click to generate new page (‘details_task.html’)
//... taskItem.querySelector('.center').onclick = function() { document.querySelector('#myNavigator') .pushPage('html/details_task.html', { animation: 'slide', data: { element: taskItem } } ); }; //...
This is the page ‘details_task.html’
<ons-page id="detailsTaskPage"> <ons-toolbar> <div class="left"><ons-back-button>Back</ons-back-button></div> <div class="center">Información ruta</div> <div class="right"></div> </ons-toolbar> <ons-tabbar id="myTabbar" position="auto"> <ons-tab page="html/infoRouteDetail.html" label="Detalle" active> </ons-tab> <ons-tab page="html/infoRouteStop.html" label="Parada"> </ons-tab> </ons-tabbar> </ons-page>
I need to pass information to TAB 'infoRouterDetail.html
My controller
myApp.controllers = { //////////// // Detail // //////////// detailsTaskPage: function(page) { // Get the element passed as argument to pushPage. var element = page.data.element; // Fill the view with the stored data. page.querySelector('#title-input').value = element.data.title; page.querySelector('#category-input').value = element.data.category; page.querySelector('#description-input').value = element.data.description; page.querySelector('#highlight-input').checked = element.data.highlight; page.querySelector('#urgent-input').checked = element.data.urgent; } };
I can load the information into details_taks.html but I can not pass information to the tab page directly.
Any suggestions?
-
Hi!
I’ve made it work.
I do not know if it will be a good solution.
I created a global variable ($ scope)
When onsen creates the tab page it calls its controller (detailsTaskPage) and passes the item to the scope.
When loading the page of the first tab is called its controller(infoRouteDetail), I have the item available thanks to the global scope.myApp.controllers = { $scope: null, detailsTaskPage: function(page) { // Get the element passed as argument to pushPage. var element = page.data.element.data; $scope = element; }, infoRouteDetail: function(page){ console.log('info route detail') console.log($scope) page.querySelector('#title-input').value = $scope.title; } };
If someone has a better solution than please put it!!:+1: