onsenUI AngularJS UI工作不正常



我在https://ide.monaca.mobi

我创建了一个登录应用程序,但UI设计无法正常工作

这是我的index.html应用

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<script src="components/loader.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/login.js"></script> 
</head>
<body ng-controller="loginCtrl">
<ons-navigator var="myNavigator" page="login.html"></ons-navigator> 
</body>
</html>

这是我的login.html应用

<ons-page>
<ons-toolbar>
<div class="center">My App</div>
</ons-toolbar>
<div style="text-align: center; margin-top: 30px;">
<p>
<input id="email" modifier="underbar" type="text" placeholder="Email" float ng-model="user.email">
</p>
<p>
<input id="password" modifier="underbar" type="password" placeholder="Password" float ng-model="user.password">
</p>
<p>
<input id="domain" modifier="underbar" type="text" placeholder="Domain" float ng-model="user.domain">
</p>
<p style="margin-top: 30px;">
<ons-button ng-click="submitLogin()">Sign in</ons-button>
</p>
</div>
</ons-page>

这是我的login.js

var myApp = angular.module("myApp", ['onsen']);
myApp.controller('loginCtrl', function($scope) {
$scope.submitLogin = function() {  
alert("hello")     
myNavigator.pushPage('page1.html');
};
});

当我做这件事的时候,如果有任何问题,请帮帮我,我是新来的。第二页还有一件事意味着page1.html我需要标签栏我怎么才能放Thankyou

您可能没有将Onsen UI库添加到您的项目中。要做到这一点,请单击页面顶部的"Config"选项卡,选择"Manage JS/CSS Components",然后单击Onsen UI组件的"Add"按钮。它会询问您要安装哪个版本。只需选择最新版本,然后单击"安装"。请确保选中复选框,以便在安装后出现的对话框中也包含角度库。

至于ons选项卡,请创建一个单独的html-ons页面文件,在其中添加ons选项卡及其选项卡。然后,不在导航器上推送"page1.html",而是推送具有ons选项卡的html。

查看此页面,了解如何添加选项卡:http://tutorial.onsen.io/?framework=angular1&category=引用&module=选项卡

注意:我注意到您只使用了常规的<input>,而不是<ons-input>。在这种情况下,您添加的"修饰符"属性将不起作用,因为它只适用于<ons-input>

最新更新