Javascript 如何在Onsen UI中从一个页面导航到另一个页面

我正在开发一个基于Onsen UI（和PhoneGap+AngularJS）的移动应用程序。 我想从Settings.html模板/页面导航到StartPage.html模板/页面。但是当它们都有

标记时，它就不起作用了。有人能帮我吗。 谢谢

App.js（AngularJS）

index.html

<!--StartPage.html-->
 <ons-template id="StartPage.html">
    <ons-navigator var="myNav">
        <ons-page ng-controller="StartPage" style="background-color:#4383cd">

            <img src="images/Logo.png" height="150px" style=" display: block; margin-top:40%; margin-left: auto; margin-right: auto" />

            <button class="button button--outline" style="width:95%; display:block; margin-top:60%; margin-left: auto; margin-right: auto; border-color:white; color:white" ng-click="LogInPage()">LOG IN</button>
            <button class="button button--outline" style="width:95%; display:block; margin-top:10px; margin-left: auto; margin-right: auto; border-color:white; color:white" ng-click="SignUpPage()">SIGN UP</button>
        </ons-page>
    </ons-navigator>
</ons-template>

  <!--Settings.html-->
 <ons-template id="Settings.html">
    <ons-navigator var="navSettings">
    <ons-page ng-controller="Settings">
        <ons-toolbar fixed-style>
            <div class="left">
                <ons-toolbar-button ng-click="menu.toggle()">
                    <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
                </ons-toolbar-button>
            </div>
            <div class="center">Settings</div>
        </ons-toolbar>
        <button ng-click="LogOut()" class="button button--large">Log out</button>
    </ons-page>
     </ons-navigator>
</ons-template>

登录
注册
设置
注销

如果您还没有检查文档，我建议您检查文档：

您不需要每页都有导航器，只需要一个：

<ons-navigator var="myNav" page="StartPage.html">
</ons-navigator>

<!--StartPage.html-->
 <ons-template id="StartPage.html">
    <ons-page ng-controller="StartPage" style="background-color:#4383cd">
        <img src="images/Logo.png" height="150px" style=" display: block; margin-top:40%; margin-left: auto; margin-right: auto" />

        <button class="button button--outline" style="width:95%; display:block; margin-top:60%; margin-left: auto; margin-right: auto; border-color:white; color:white" ng-click="LogInPage()">LOG IN</button>
        <button class="button button--outline" style="width:95%; display:block; margin-top:10px; margin-left: auto; margin-right: auto; border-color:white; color:white" ng-click="SignUpPage()">SIGN UP</button>
    </ons-page>
</ons-template>

  <!--Settings.html-->
 <ons-template id="Settings.html">
    <ons-page ng-controller="Settings">
        <ons-toolbar fixed-style>
            <div class="left">
                <ons-toolbar-button ng-click="menu.toggle()">
                    <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
                </ons-toolbar-button>
            </div>
            <div class="center">Settings</div>
        </ons-toolbar>
        <button ng-click="LogOut()" class="button button--large">Log out</button>
    </ons-page>
</ons-template>

登录
注册
设置
注销

检查您的JS和控制器是否可以进行这些更改。希望有帮助

更新

---

在OnsenUI v2版本中，属性

startPage

已更改为

page

。你可以在

上查看，我已经试过了，但不起作用。我的移动应用程序带有带导航器的幻灯片菜单。这是一个类似的移动应用程序示例。(). 我想让你可以注销我的应用程序，然后进入“StartPage.html”。此页面没有滑动菜单。我希望你能帮助我，如果滑动菜单是你应用程序的父组件，那么只需使用

myMenu.setMainPage（'StartPage'）；myMenu.Setsweable（错误）；'以注销。如果您登录，请使其再次可滑动。
<ons-navigator var="myNav" page="StartPage.html">
</ons-navigator>

<!--StartPage.html-->
 <ons-template id="StartPage.html">
    <ons-page ng-controller="StartPage" style="background-color:#4383cd">
        <img src="images/Logo.png" height="150px" style=" display: block; margin-top:40%; margin-left: auto; margin-right: auto" />

        <button class="button button--outline" style="width:95%; display:block; margin-top:60%; margin-left: auto; margin-right: auto; border-color:white; color:white" ng-click="LogInPage()">LOG IN</button>
        <button class="button button--outline" style="width:95%; display:block; margin-top:10px; margin-left: auto; margin-right: auto; border-color:white; color:white" ng-click="SignUpPage()">SIGN UP</button>
    </ons-page>
</ons-template>

  <!--Settings.html-->
 <ons-template id="Settings.html">
    <ons-page ng-controller="Settings">
        <ons-toolbar fixed-style>
            <div class="left">
                <ons-toolbar-button ng-click="menu.toggle()">
                    <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
                </ons-toolbar-button>
            </div>
            <div class="center">Settings</div>
        </ons-toolbar>
        <button ng-click="LogOut()" class="button button--large">Log out</button>
    </ons-page>
</ons-template>