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

Question

我正在开发基于Onsen UI（和PhoneGap + AngularJS）的移动应用程序。 我想从Settings.html模板/页面导航到StartPage.html模板/页面。 但是当它们都有</ons-navigator>标签时，它不起作用。 有人能帮我吗。 谢谢

App.js（AngularJS）

//Start page
app.controller('StartPage', ['$scope', function ($scope) {
    $scope.menu.setSwipeable(false);         
         $scope.LogInPage = function () {          
        $scope.myNav.pushPage('LogIn.html', { animation: 'slide' })
    };
    $scope.SignUpPage = function () {
        $scope.myNav.pushPage('SignUp.html', { animation: 'slide' })
    };
}]);
    //Settings
app.controller('Settings', ['$scope', function ($scope) {

    $scope.LogOut = function () {
        $scope.navSettings.resetToPage('StartPage.html', { animation: 'slide' });
    };
}]);

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

Answer 1

如果您还没有这样做，我建议您查看文档： http ： //onsen.io/guide/overview.html http://onsen.io/reference/javascript.html

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

<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和控制器是否正常。 希望能帮助到你！

UPDATE

在OnsenUI v2版本中，属性startPage已更改为page 。 你可以在OnsenUI v2 Navigator上查看这个