"TypeError:无法读取属性'pushPage‘的null“

Question

我正在使用onsen ui + angularjs进行开发。我的应用程序必须访问不同的部分，一个是“主页”页面，另一个是横向菜单。当我使用"home“菜单并访问列表中的任何项目时，都是完美的，但是如果我使用横向菜单并尝试访问任何项--铬调试器--则会显示以下错误：

paste.split.forEach.ngEventDirectives.(anonymous :无法读取属性'pushPage‘的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 .$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)在HTMLElement.click中dblclick按下鼠标鼠标移动鼠标按住键盘按下键盘键提交焦点模糊复制剪切Scope.$scope.showPost函数.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)

我的项目网址：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“这样的页面，一种是您有导航器，另一种是您没有导航器。我建议您每页使用一个导航器，并将菜单放在所有页面的顶部，这样它总是可用的。