Onsen AngularJS - не оспаривает данные формы

Question

Onsen AngularJS - не оспаривает данные формы

0

Я пишу кросс-платформенное приложение, используя Onsen, Monaca и AngularJS.

У меня есть стандартный экран LOGiN, где пользователи должны ввести свой идентификатор пользователя, чтобы я мог зарегистрировать их через API-вызов.

Однако, следуя ЭТОТ примеру из ЗДЕСЬ, я не могу получить свой ID пользователя для отображения. Может ли кто-нибудь увидеть, где я ошибаюсь, пожалуйста?

Результат, который я вижу, выглядит примерно так: ваш идентификатор пользователя: {{lastName}}

Весь код включен.

index.html

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">

    <!-- Mobile web App Capable -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">

    <title>Management</title>  

    <!-- Tests -->
    <script type="text/javascript" src="js/app.js"></script>

    <script src="components/loader.js"></script>
    <script src="js/winstore-jscompat.js"></script>
    <link rel="stylesshet" href="components/monaca-onsenui/js/angular/angular-csp.css">
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/style.css">
    <script>
        var myApp = angular.module('myApp', ['onsen']);
    </script> 
</head>

<body>
    <ons-navigator var="myNavigator" page="login.html"></ons-navigator> 
</body>
</html>

login.html

<ons-page>
    <ons-toolbar>
        <div class="center">Login</div>
    </ons-toolbar>

    <div ng-controller="personController">
        <form class="login-form" style="text-align: center" name="myForm">
            <section style="padding: 8px">
                <input type="password" class="text-input--underbar" required minlength="3" maxlength="4"  placeholder="User ID" ng-model="firstName">
            </section>

            <section>
                <div style="color: #015794; text-align: right">
                    <label class="checkbox--noborder">
                        <input type="checkbox">
                            <div class="checkbox__checkmark"></div>
                            <small>Remember Me</small>
                    </label>
                </div>
            </section>

            <div ng-app="myApp" style="text-align: center; color: #889DA8">
                Your User ID is: <br><strong>{{lastName}}</strong>
            </div>

            <section style="padding: 0 8px 8px">
                <ons-button var="saveBtn" ng-disabled="myForm.$invalid" modifier="large" onclick="modal.show('modal')">Log In</ons-button>
            </section>
        </form>
    </div>
</ons-page>

app.js

angular.module("myApp", []).controller("personController", function($scope)
{
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});

heyred 22 апр. 2016, в 12:01

Источник

Теги:

angularjs

forms

onsen-ui

monaca

1 ответ

Ещё вопросы

Ilia Yatchev · Accepted Answer · 2016-04-22T08-20-00.000Z

С моей точки зрения, проблема, похоже, лежит со структурой. Вы, кажется, делаете что-то в неправильном порядке и потенциально делаете что-то в два раза. В настоящее время у вас есть

<script type="text/javascript" src="js/app.js"></script>
<script src="components/loader.js"></script>
...
<script>
    var myApp = angular.module('myApp', ['onsen']);
</script>

И вы определяете свой контроллер в app.js. Однако, похоже, что угловой должен быть загружен после этого с loader.js, и вы добавляете onsen в конце, создавая тот же самый угловой модуль снова.

Заказ должен быть первым loader.js затем app.js, который должен добавить Onsen в первую строку.

index.html

<script src="components/loader.js"></script>
<script src="js/app.js"></script>

app.js

angular.module("myApp", ['onsen']).controller("personController", function($scope){
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});

DEMO