我正在开发基于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
}
这里的几个问题：
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-也许您更喜欢使用inresetToPage()而不是pushPage()in，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放在一个单独的文件中。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句