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:


Log in to reply