Javascript OnsenUI显示页面

我有项目的当前设置：

<div ons-if-orientation="landscape">
  <ons-split-view secondary-page="app/views/menu.html" main-page="app/views/main.html" main-page-width="80%" collapse="portrait">
  </ons-split-view>
</div>

<div ons-if-orientation="portrait">
  <ons-sliding-menu max-slide-distance="260px" menu-page="app/views/menu.html" main-page="app/views/main.html" type="push" var="menu">
  </ons-sliding-menu>
</div>

显示此选项在横向时显示分割视图，在纵向时显示幻灯片

作为主页，以下内容在我的html中：

<ons-navigator title="Navigator" var="myNavigator">
    <ons-page>
        <ons-toolbar>
            <div class="left">
                <ons-toolbar-button ng-click="menu.toggle()" ons-if-orientation="portrait">
                    <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
                </ons-toolbar-button>
            </div>
            <div class="center">Main page</div>
        </ons-toolbar>
        <div style="text-align: center">
            <br>
            <ons-button modifier="light"
                        onclick="myNavigator.pushPage('app/views/buildings/buildings.html', { animation : 'slide' } )">
                Show buildings
            </ons-button>
        </div>
    </ons-page>
</ons-navigator>

主页


展示建筑物

但现在我想改变它，当我点击导航或主页上的按钮时，显示实际的页面

我试着做了以下几点：

<ons-button modifier="light" onclick="myNavigator.pushPage('app/views/buildings/buildings.html', { animation : 'slide' } )">
    Show buildings
</ons-button>

展示建筑物

但是什么都没发生，有什么线索说明为什么会发生这种情况吗？以下画笔显示了此行为的作用：

---

编辑：发现这种行为只在网上浏览，当在我的android设备上打开时，它开始工作了

好的，代码正在工作，但正如我在移动版本上所说的，这是因为它只能切换一个视图，所以我让两个导航器同时工作：

<div ng-controller="mainController">
    <div ons-if-orientation="landscape">
        <ons-split-view
                secondary-page="app/views/menu.html"
                main-page="navigatorLand.html"
                main-page-width="80%"
                collapse="portrait"
                var="splitview">
        </ons-split-view>
    </div>

    <div ons-if-orientation="portrait">
        <ons-sliding-menu
                max-slide-distance="260px"
                menu-page="app/views/menu.html"
                main-page="navigatorPort.html"
                type="push"
                var="menu">
        </ons-sliding-menu>
    </div>

    <ons-template id="navigatorPort.html">
        <ons-navigator var="navPort"></ons-navigator>
    </ons-template>
    <ons-template id="navigatorLand.html">
        <ons-navigator var="navLand"></ons-navigator>
    </ons-template>
</div>

---

好的，代码是有效的，但正如我在移动版上所说的，这是因为它只能切换一个视图，所以我让两个导航器协同工作：

<div ng-controller="mainController">
    <div ons-if-orientation="landscape">
        <ons-split-view
                secondary-page="app/views/menu.html"
                main-page="navigatorLand.html"
                main-page-width="80%"
                collapse="portrait"
                var="splitview">
        </ons-split-view>
    </div>

    <div ons-if-orientation="portrait">
        <ons-sliding-menu
                max-slide-distance="260px"
                menu-page="app/views/menu.html"
                main-page="navigatorPort.html"
                type="push"
                var="menu">
        </ons-sliding-menu>
    </div>

    <ons-template id="navigatorPort.html">
        <ons-navigator var="navPort"></ons-navigator>
    </ons-template>
    <ons-template id="navigatorLand.html">
        <ons-navigator var="navLand"></ons-navigator>
    </ons-template>
</div>

---

好的，代码是有效的，但正如我在移动版上所说的，这是因为它只能切换一个视图，所以我让两个导航器协同工作：

<div ng-controller="mainController">
    <div ons-if-orientation="landscape">
        <ons-split-view
                secondary-page="app/views/menu.html"
                main-page="navigatorLand.html"
                main-page-width="80%"
                collapse="portrait"
                var="splitview">
        </ons-split-view>
    </div>

    <div ons-if-orientation="portrait">
        <ons-sliding-menu
                max-slide-distance="260px"
                menu-page="app/views/menu.html"
                main-page="navigatorPort.html"
                type="push"
                var="menu">
        </ons-sliding-menu>
    </div>

    <ons-template id="navigatorPort.html">
        <ons-navigator var="navPort"></ons-navigator>
    </ons-template>
    <ons-template id="navigatorLand.html">
        <ons-navigator var="navLand"></ons-navigator>
    </ons-template>
</div>

---

好的，代码是有效的，但正如我在移动版上所说的，这是因为它只能切换一个视图，所以我让两个导航器协同工作：

<div ng-controller="mainController">
    <div ons-if-orientation="landscape">
        <ons-split-view
                secondary-page="app/views/menu.html"
                main-page="navigatorLand.html"
                main-page-width="80%"
                collapse="portrait"
                var="splitview">
        </ons-split-view>
    </div>

    <div ons-if-orientation="portrait">
        <ons-sliding-menu
                max-slide-distance="260px"
                menu-page="app/views/menu.html"
                main-page="navigatorPort.html"
                type="push"
                var="menu">
        </ons-sliding-menu>
    </div>

    <ons-template id="navigatorPort.html">
        <ons-navigator var="navPort"></ons-navigator>
    </ons-template>
    <ons-template id="navigatorLand.html">
        <ons-navigator var="navLand"></ons-navigator>
    </ons-template>
</div>

---

它在你的android设备上工作，因为它的方向是纵向的，而你的pc浏览器的方向是横向的。如果您操纵窗口的尺寸，您会注意到它也适用于您的pc浏览器

主要问题是您有两个相同导航器的实例

---

它适用于android设备，因为它的方向是纵向的，而pc浏览器的方向是横向的。如果您操纵窗口的尺寸，您会注意到它也适用于您的pc浏览器

主要问题是您有两个相同导航器的实例

---

它适用于android设备，因为它的方向是纵向的，而pc浏览器的方向是横向的。如果您操纵窗口的尺寸，您会注意到它也适用于您的pc浏览器

主要问题是您有两个相同导航器的实例

---

它适用于android设备，因为它的方向是纵向的，而pc浏览器的方向是横向的。如果您操纵窗口的尺寸，您会注意到它也适用于您的pc浏览器

主要问题是您有两个相同导航器的实例

就像我几秒钟前说的那样！：）@猕猴桃哈哈哈，我很高兴你能自己理解：）我几秒钟前说的话才是真的！：）@猕猴桃哈哈哈，我很高兴你能自己理解：）我几秒钟前说的话才是真的！：）@猕猴桃哈哈哈，我很高兴你能自己理解：）我几秒钟前说的话才是真的！：）@猕猴桃哈哈哈，我很高兴你能自己理解：）