Onsen UI 页面在导航后无法正确加载

Question

我正在开发基于 Onsen UI（和 PhoneGap + AngularJS）的移动应用程序。

当我浏览应用程序的两个 html 页面时，索引加载完美，但登录后应显示的下一页不可用，样式完全关闭，并且没有控件在工作。

我有一个 index.html 具有以下正文：

<body>
  <ons-navigator var="myNavigator" page="login.html">
  </ons-navigator> 

  <ons-template id="login.html">
    <ons-page ng-controller="LoginController" id="login">
        <ons-toolbar>
            <div class="center">Log In</div>
        </ons-toolbar>

        <div class="login-form">
            <input type="text" class="text-input--underbar" placeholder="Email" ng-model="email">
            <input type="text" class="text-input--underbar" placeholder="Password" ng-model="password">
            <br><br>
            <ons-button modifier="large" class="login-button" ng-click="checkLogin(email,password,spourl)" > Log In</ons-button>
        </div>

    </ons-page>
  </ons-template>

</body>

main.html 具有以下正文：

<body ng-controller="AppController">
    <ons-tabbar>
        <ons-tab active="true" page="upcoming_tasks.html">
            ....
        </ons-tab>
        <ons-tab page="settings.html">
            ....
        </ons-tab>
    </ons-tabbar>

    <ons-template id="upcoming_tasks.html">
        <ons-page id="upcoming_tasks">
           ....
        </ons-page>
    </ons-template>

    <ons-template id="settings.html">
        <ons-page id="settings">
           ....
        </ons-page>
    </ons-template>

我有两个控制器： LoginController 成功登录后使用 myNavigator 转到 main.html（在单独的 .html 文件中） AppController 在 main.html 文件中用于不同的操作。两者都是从 main.js 文件加载的，该文件包含在两个文件中。

如果我直接从浏览器分别访问这两个文件，它们可以正常工作（http://192.168..../index.html works OK, and also http://192.168.../main.html 工作正常）。该错误仅在我从 index.html 文件导航到 main.html.

时发生

可能是什么问题？我对整个 AngularJS、温泉 UI 这件事还很陌生。

我真的不想 "navigate" 浏览器到 main.html，因为我正在使用服务在两个控制器（登录名和密码）之间共享数据，如果浏览器重新加载 main.html 页面，控制器将被初始化，数据将丢失。

这里还有来自 main.js 文件的片段：

var myApp = angular.module('app', ['onsen']);
myApp.controller('LoginController', function ($scope, sharedProperties, Data) {
        $scope.openProtectedPage = function () {
            setTimeout(function() {
                myNavigator.pushPage('main.html');
                //window.location.href = 'main.html';
            }, 1000);

        }

        $scope.checkLogin = function(email,password, url) {
              //check email,pass and url
                   $scope.openProtectedPage();
        }
});
myApp.controller('AppController', function ($scope, $timeout, sharedProperties, Data) {
    $scope.email = sharedProperties.getUser();
    $scope.password = sharedProperties.getPass();
    $scope.url = sharedProperties.getUrl();

    //different functions for loading data and working with it

}

Answer 1

这里有几个问题：

1 - ons-template 必须始终位于您的 index.html 中。否则这些页面不会在您使用 pushPage 时创建。将 upcoming_tasks.html、settings.html 和任何其他模板移动到您的索引中。

2 - 从您的 main.html 页面中删除 body 标签。您只需要 index.html 中的文件，其余文件（包括使用 ons-template 声明的文件）必须仅包含您在导航器中显示的实际内容。

3 - ons-navigator 总是需要一个 ons-page 作为 child，所以用 ons-page 包裹你的 ons-tabbar 以避免可能的问题（当你这样做时pushPage('main.html') 您将 ons-tabbar 包含在 index.html 中的 ons-navigator 中。

4 - 也许您更喜欢在 openProtectedPage() 中使用 resetToPage() 而不是 pushPage()，这样用户就无法返回登录页面（它已从页面堆栈中删除）。

Onsen UI 文档中有很多示例：http://onsen.io/guide/overview.html

希望对您有所帮助！

编辑：

index.html:

<body>

    <ons-navigator var="myNavigator" page="login.html">
    </ons-navigator>

    <ons-template id="login.html">
        <ons-page ng-controller="LoginController" id="login">
            <ons-toolbar>
                <div class="center">Log In</div>
            </ons-toolbar>

            <div class="login-form">
                <input type="text" class="text-input--underbar" placeholder="Email" ng-model="email">
                <input type="text" class="text-input--underbar" placeholder="Password" ng-model="password">
                <br><br>
                <ons-button modifier="large" class="login-button" ng-click="checkLogin(email,password,spourl)" > Log In</ons-button>
            </div>

        </ons-page>
    </ons-template>


    <ons-template id="main.html">
        <ons-page>
            <ons-tabbar>
                <ons-tab active="true" page="upcoming_tasks.html">
                    ....
                </ons-tab>
                <ons-tab page="settings.html">
                    ....
                </ons-tab>
            </ons-tabbar>
        </ons-page>
    </ons-template>

    <ons-template id="upcoming_tasks.html">
        <ons-page id="upcoming_tasks">
           ....
        </ons-page>
    </ons-template>

    <ons-template id="settings.html">
        <ons-page id="settings">
           ....
        </ons-page>
    </ons-template>

</body>

您可以选择将任何 ons-template 的内容放入单独的文件中。

Onsen UI 页面在导航后无法正确加载

Onsen UI page not loading correctly after navigation

html

javascript

angularjs

cordova

onsen-ui