Search code examples
angularjsonsen-ui

Onsen ui error "TypeError: Cannot read property 'pushPage' of null"

Im developing with onsen ui + angularjs. My app have to ways to access to different sections, one is for "home" page and another is for lateral menu. When i use "home" menu and i access to any items of my list works perfect, but if i use lateral menu and i try to access to any items chrome debugger show me this error:

TypeError: Cannot read property 'pushPage' of null at Scope.$scope.showPost (http://recorramisiones.com.ar/rutadelaselva/app2/js/app.js:103:26) at $parseFunctionCall (http://recorramisiones.com.ar/rutadelaselva/app2/lib/onsen/js/angular/angular.js:12133:18) at http://recorramisiones.com.ar/rutadelaselva/app2/lib/onsen/js/onsenui.js:15815:21 at Scope.$get.Scope.$eval (http://recorramisiones.com.ar/rutadelaselva/app2/lib/onsen/js/angular/angular.js:14123:28) at Scope.$get.Scope.$apply (http://recorramisiones.com.ar/rutadelaselva/app2/lib/onsen/js/angular/angular.js:14221:23) at HTMLElement.click dblclick mousedown mouseup mouseover mouseout mousemove mouseenter mouseleave keydown keyup keypress submit focus blur copy cut paste.split.forEach.ngEventDirectives.(anonymous function).compile.listener (http://recorramisiones.com.ar/rutadelaselva/app2/lib/onsen/js/onsenui.js:15814:25) at HTMLElement.eventHandler (http://recorramisiones.com.ar/rutadelaselva/app2/lib/onsen/js/angular/angular.js:3013:21)

My project url: http://recorramisiones.com.ar/rutadelaselva/app2/

Screenshot: http://puu.sh/g4Zr5.jpg

menu.html (lateral menu):

<ons-page modifier="menu-page">
 <ons-toolbar modifier="transparent"></ons-toolbar>

 <ons-list class="menu-list">
 <ons-list-item class="menu-item" ng-click="menu.setMainPage('home.html', {closeMenu: true})">
  <ons-icon icon="fa-home" fixed-width="true"></ons-icon>
  Inicio
</ons-list-item>
<ons-list-item class="menu-item" ng-click="menu.setMainPage('areas.html', {closeMenu: true})">
  <ons-icon icon="fa-leaf" fixed-width="true"></ons-icon>
   Areas Naturales
</ons-list-item>
<ons-list-item class="menu-item" ng-click="menu.setMainPage('informes.html', {closeMenu: true})">
  <ons-icon icon="fa-info-circle" fixed-width="true"></ons-icon>
  Informes Turísticos
</ons-list-item>
<ons-list-item class="menu-item" ng-click="menu.setMainPage('atractivos.html', {closeMenu: true})">
  <ons-icon icon="fa-camera" fixed-width="true"></ons-icon>
   Atractivos y Actividades
</ons-list-item>
<ons-list-item class="menu-item" ng-click="menu.setMainPage('alojamientos.html', {closeMenu: true})">
  <ons-icon icon="fa-building" fixed-width="true"></ons-icon>
  Alojamientos
</ons-list-item>    
<ons-list-item class="menu-item" ng-click="menu.setMainPage('hospitales.html', {closeMenu: true})">
  <ons-icon icon="fa-plus-square" fixed-width="true"></ons-icon>
   Hospitales y Servicios
</ons-list-item>
<ons-list-item class="menu-item" ng-click="menu.setMainPage('markers.html', {closeMenu: true})">
  <ons-icon icon="fa-map-marker" fixed-width="true"></ons-icon>
  Mapa
</ons-list-item>
</ons-list>
</ons-page>

home.html (home menu)

<ons-navigator animation="slide" var="gallery"> 
  <ons-page>
    <ons-toolbar modifier="opacity">
      <div class="left">
        <ons-toolbar-button ng-click="menu.toggle()"><ons-icon icon="ion-navicon-round" fixed-width="false"></ons-icon></ons-toolbar-button>
      </div>
      <div class="center">Ruta de la Selva</div>
    </ons-toolbar>
    <div class="app-page">
      <div class="app-page-menu">
        <ons-row>
          <ons-col>
            <ons-button modifier="clean" ng-click="gallery.pushPage('alojamientos.html');">
              <img src="img/alojamientos.jpg">
              <p>Alojamientos</p>
            </ons-button>
          </ons-col>
        </ons-row>
        <ons-row>
          <ons-col>
            <ons-button modifier="clean" ng-click="gallery.pushPage('informes.html');">
              <img src="img/informes.jpg">
              <p>Informes Turísticos</p>
            </ons-button>
          </ons-col>
        </ons-row>
        <ons-row>
          <ons-col>
            <ons-button modifier="clean" ng-click="gallery.pushPage('atractivos.html');">
              <img src="img/actividades.jpg">
              <p>Atractivos y Actividades</p>
            </ons-button>
          </ons-col>
        </ons-row>
        <ons-row>
          <ons-col>
            <ons-button modifier="clean" ng-click="gallery.pushPage('areas.html');">
              <img src="img/areas.jpg">
              <p>Áreas Naturales</p>
            </ons-button>
          </ons-col>
        </ons-row>
        <ons-row>
          <ons-col>
            <ons-button modifier="clean" ng-click="gallery.pushPage('dishes.html');">
              <img src="img/hospitales.jpg">
              <p>Hospitales y Servicios</p>
            </ons-button>
          </ons-col>
        </ons-row>
        <ons-row>
          <ons-col>
            <ons-button modifier="clean" ng-click="gallery.pushPage('markers.html');">
              <img src="img/map.jpg">
              <p>Mapa</p>
            </ons-button>
          </ons-col>
        </ons-row>
      </div>
    </div>
  </ons-page>
</ons-navigator>

Any idea?

Solution

  • In the case where you use the main page you push the list of places onto the navigator page stack. This works well because you can now push the next page on top of the page stack as well.

    In the case when you use the menu you set the main page to the list of places (without a navigator). So when you click it can't push the page since there is no navigator.

    Basically you can get to a page like "areas.html" in two different ways, one where you have a navigator and one where you don't. I would advice you to use one navigator per page and have the menu on top of everything so it's always available.