Monaca Onsen UI Discord Chat Github Repo


  • 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() {
                  animation: 'slide',
                  data: {
                    element: taskItem

    This is the page ‘details_task.html’

    <ons-page id="detailsTaskPage">
        <div class="left"><ons-back-button>Back</ons-back-button></div>
        <div class="center">Información ruta</div>
        <div class="right"></div>
      <ons-tabbar id="myTabbar" position="auto">
        <ons-tab page="html/infoRouteDetail.html" label="Detalle" active>
        <ons-tab page="html/infoRouteStop.html" label="Parada">

    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 =;
        // Fill the view with the stored data.
        page.querySelector('#title-input').value =;
        page.querySelector('#category-input').value =;
        page.querySelector('#description-input').value =;
        page.querySelector('#highlight-input').checked =;
        page.querySelector('#urgent-input').checked =;

    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 =;
        $scope = element;
      infoRouteDetail: function(page){
        console.log('info route detail')
        page.querySelector('#title-input').value = $scope.title;

    If someone has a better solution than please put it!!:+1: