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

Question

我正在开发温泉 ui + angularjs。我的应用程序必须通过多种方式访问不同的部分，一种用于 "home" 页面，另一种用于横向菜单。当我使用 "home" 菜单并访问列表中的任何项目时，效果很好，但如果我使用横向菜单并尝试访问任何项目 chrome，调试器会向我显示此错误：

TypeError: 无法读取属性 'pushPage' 的 null 在范围内。$scope.showPost (http://recorramisiones.com.ar/rutadelaselva/app2/js/app.js:103:26) 在 $parseFunctionCall (http://recorramisiones.com.ar/rutadelaselva/app2/lib/onsen/js/angular/angular.js:12133:18) 在 http://recorramisiones.com.ar/rutadelaselva/app2/lib/onsen/js/onsenui.js:15815:21 在范围内。$get.Scope.$eval (http://recorramisiones.com.ar/rutadelaselva/app2/lib/onsen/js/angular/angular.js:14123:28) 在范围内。$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.(匿名函数).compile.listener (http://recorramisiones.com.ar/rutadelaselva/app2/lib/onsen/js/onsenui.js:15814:25) 在 HTMLElement.eventHandler (http://recorramisiones.com.ar/rutadelaselva/app2/lib/onsen/js/angular/angular.js:3013:21)

我的项目url：http://recorramisiones.com.ar/rutadelaselva/app2/

截图：http://puu.sh/g4Zr5.jpg

menu.html（横向菜单）：

<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（主菜单）

<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>

有什么想法吗？

Answer 1

在您使用主页的情况下，您将位置列表推送到导航器页面堆栈。这很有效，因为您现在也可以将下一页推送到页面堆栈的顶部。

在使用菜单的情况下，您将主页设置为位置列表（没有导航器）。所以当你点击它不能推送页面，因为没有导航器。

基本上，您可以通过两种不同的方式进入 "areas.html" 之类的页面，一种是有导航器的方式，另一种是没有导航器的方式。我建议您每页使用一个导航器，并将菜单置于所有内容之上，以便始终可用。

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

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

angularjs

onsen-ui