导航后，温泉用户界面页面无法正确加载

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可以正常运行，并且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-从main.html页面中删除body标签。 您只需要index.html的文件，其余文件（包括使用ons-template声明的文件）必须仅包含您在导航器中显示的实际内容。

3- ons-navigator始终需要一个ons-page作为孩子，因此用ons-page包裹ons-tabbar以避免可能的问题（当您执行pushPage('main.html')时，您pushPage('main.html') ons-tabbar包含在您在index.html拥有的ons-navigator ）。

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

导航后，温泉用户界面页面无法正确加载

问题描述

1 个解决方案

解决方案1
3 已采纳 2015-08-26 03:01:02

导航后，温泉用户界面页面无法正确加载

问题描述

1 个解决方案

解决方案1 3 已采纳 2015-08-26 03:01:02

解决方案1
3 已采纳 2015-08-26 03:01:02