Question

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

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

我有一个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>

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

如果我直接从浏览器单独访问这两个文件，它们可以正常工作（http://192.168..../index.html正常工作，http://192.168.../main.html也正常工作）。只有在我从index.html文件导航到main.html时才会出现错误。

可能是什么问题？我对整个AngularJS，Onsen UI事情都很陌生。

我真的不想将浏览器“导航”到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 - 从body页面中删除main.html个标签。您只需要index.html中的文件，其余文件（包括用ons-template声明的文件）必须仅包含您在导航器中显示的实际内容。

3 - ons-navigator小时候始终需要ons-page，因此请将ons-tabbar与ons-page一起包裹，以避免可能的问题（当pushPage('main.html')你在ons-tabbar中的ons-navigator中包含index.html。

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

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内容放在单独的文件中。

导航后未正确加载温泉UI页面

1 个答案: