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

Question

我正在开发基于 Onsen UI（和 PhoneGap + AngularJS）的移动应用程序。我想从 Settings.html template/page 导航到 StartPage.html template/page。但是当他们两个都有</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 和控制器是否适合这些更改。希望对您有所帮助！

更新

随着 OnsenUI v2 版本的发布，属性 startPage 已更改为 page。你可以在 OnsenUI v2 Navigator

上查看

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

How to navigate from a page to another page in Onsen UI

javascript

angularjs

cordova

onsen-ui

更新