Question

我在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

Answer 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无法正常工作？

1 个答案: