Onsen AngularJS - nicht verfälschende Form Daten

Ich schreibe eine Cross-Plattform-App mit Onsen, Monaca und AngularJS.Onsen AngularJS - nicht verfälschende Form Daten

Ich habe einen Standard-LOGiN-Bildschirm, wo Benutzer ihre Benutzer-ID eingeben müssen, damit ich sie über API-Aufruf anmelden kann.

Nach THIS Beispiel von HERE kann ich jedoch nicht meine Benutzer-ID angezeigt bekommen. Kann jemand bitte sehen, wo ich falsch liege?

Der Ausgang I sieht genau so sehe: Ihre User-ID ist: {{}} nachName

Alle Code enthalten.

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"; 
});

Quelle

2016-04-22 heyred

Aus meiner Sicht der Problem scheint bei der Struktur zu liegen. Sie scheinen Dinge in der falschen Reihenfolge zu tun und möglicherweise einige Dinge zweimal zu tun. Derzeit haben Sie

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

Und Sie definieren Ihr Controller in app.js. Es scheint jedoch, dass angular danach mit loader.js geladen werden sollte, und am Ende fügen Sie onsen hinzu, indem Sie dasselbe Winkelmodul erneut erstellen.

Die Reihenfolge sollte zuerst loader.js dann app.js sein, die Onsen auf der ersten Zeile hinzufügen sollte.

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

Quelle

2016-04-22 11:08:05

Onsen AngularJS - nicht verfälschende Form Daten

Antwort

Verwandte Themen