Пользовательский интерфейс onsenUI AngularJS не работает должным образом?

Я создал минимальный шаблон onsenUI AngularJS 1 в https://ide.monaca.mobi.

Я создаю одно приложение для входа, но дизайн пользовательского интерфейса работает неправильно

Это мое приложение 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>

Это мой логин.js

var myApp = angular.module("myApp", ['onsen']);

myApp.controller('loginCtrl', function($scope) {

    $scope.submitLogin = function() {  
    alert("hello")     
    myNavigator.pushPage('page1.html');
    };
});

Любые проблемы, когда я делаю, пожалуйста, помогите мне, я новичок в этом. И еще одна вещь на второй странице означает, что page1.html мне нужна панель вкладок, как я могу поставить Спасибо


person Arav KT    schedule 15.02.2017    source источник


Ответы (1)


Вероятно, вы не добавили в свой проект библиотеку пользовательского интерфейса Onsen. Для этого щелкните вкладку «Конфигурация» в верхней части страницы, выберите «Управление компонентами JS/CSS» и нажмите кнопку «Добавить» компонента пользовательского интерфейса Onsen. Он спросит вас, какую версию установить. Просто выберите самую новую версию и нажмите «Установить». И обязательно установите флажки для включения библиотек angular в диалоговое окно, которое появится после установки.

Что касается ons-tabbar, создайте отдельный html файл ons-page, в который вы добавите ons-tabbar и его вкладки. Затем вместо того, чтобы нажимать «page1.html» в навигаторе, нажмите html, который имеет вкладку ons.

Ознакомьтесь с этой страницей о том, как добавить панель вкладок: http://tutorial.onsen.io/?framework=angular1&category=reference&module=tabbar

ПРИМЕЧАНИЕ. Я заметил, что вы используете обычные <input> вместо <ons-input>. В этом случае добавленный вами атрибут «модификатор» не будет работать, поскольку он работает только с <ons-input>.

person Nikola Cvetkovski    schedule 22.02.2017