onsenUI AngularJS UI 无法正常工作？
Posted
技术标签:
【中文标题】onsenUI AngularJS UI 无法正常工作？【英文标题】：onsenUI AngularJS UI not working properly? 【发布时间】：2017-07-03 14:55:32 【问题描述】：我在https://ide.monaca.mobi创建了 onsenUI AngularJS 1 最小模板
我创建了一个登录应用程序，但 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 我需要 tabbar 我该如何输入Thankyou
【问题讨论】：
【参考方案1】：您可能没有将 Onsen UI 库添加到您的项目中。 为此，请单击页面顶部的“配置”选项卡，选择“管理 JS/CSS 组件”，然后单击 Onsen UI 组件的“添加”按钮。它会询问您要安装哪个版本。只需选择最新版本，然后单击“安装”。并确保在安装后出现的对话框中选中复选框以包含角度库。
至于 ons-tabbar，创建一个单独的 html ons-page 文件，您将在其中添加 ons-tabbar 及其选项卡。然后，不要在导航器上推送“page1.html”，而是推送具有 ons-tabbar 的 html。
查看此页面了解如何添加标签栏：http://tutorial.onsen.io/?framework=angular1&category=reference&module=tabbar
注意：我注意到您使用的只是普通的<input>，而不是<ons-input>。在这种情况下，您添加的“修饰符”属性将不起作用，因为它仅适用于 <ons-input>。
【讨论】：
以上是关于onsenUI AngularJS UI 无法正常工作？的主要内容，如果未能解决你的问题，请参考以下文章
单击链接时，Angularjs ui-view路由无法正常工作[关闭]