Onsen AngularJS - непереворачивая данные формы

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

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

Однако, следующий THIS пример от HERE Я не могу получить свой 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"; 
});

источник

2016-04-22 heyred

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

<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

источник

2016-04-22 11:08:05

Onsen AngularJS - непереворачивая данные формы

ответ

Смежные вопросы