PUSH ELEMENT TO TABBAR PAGE

dvelasco

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?

dvelasco

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: