Controller-Funktion sieht alte Version der Variablen

Ich versuche, ein paar Variablen bis zu einer Funktion in AngularJS haken und während sie scheinen, es zum Frontend zu machen, werden die Änderungen am Front-End nicht übertragen zum hinteren Ende.Controller-Funktion sieht alte Version der Variablen

Hier ist der relevante Teil des Körpers:

<body ng-controller="main-controller"> 
    <div ng-show="show_login" ng-include="'/racket-web/view/login.html'"> 
</body>

Und was beinhaltet es

<table> 
    <tr> 
    Email <input ng-model="login_email"/> {{login_email}} <br> 
    Pass <input type="password" ng-model="login_password"/> {{login_password}}<br> 
    <button ng-click="exec_login()">Login</button> 
    </tr> 
</table>

Hier ist mein Controller

app.controller('main-controller', function($scope) { 

    $scope.login_email = 'abcd'; 
    $scope.login_password = 'defg'; 


    $scope.changeView = function(view) { 
     $scope['show_login'] = false; 
     // other views snipped   
     $scope['show_' + view] = true; 
    } 

    $scope.changeView('login'); 

    $scope.exec_login = function() { 
     var email = $scope.login_email; 
     var pass = $scope.login_password; 
     alert('logging in ' + email + ' ' + pass); 
    }

Wenn ich meine Seite laufen, sehe ich meine E-Mail und übergeben Sie Eingaben wie erwartet, und wenn ich sie bearbeite, ändern sich die Debug-Werte neben den Eingaben entsprechend. Wenn ich jedoch auf die Schaltfläche klicke, hat die Alarmbox immer noch die ursprünglichen Werte.

Wie kann ich die Werte innerhalb der Funktion erhalten, um die neueste Version im Eingabefeld zu sehen? Ich weiß, dass ich VanillaJS verwenden könnte, um sie zu greifen, aber ich würde lieber richtiges Angular verwenden!

Hier ist ein Screengrab von dem, was ich sehe:

Quelle

2016-07-07 corsiKa

Es sieht so aus, als ob Sie in eine nicht intuitive prototypische Vererbungsfunktion geraten. Siehe http://stackoverflow.com/a/18128502/76512. Wenn Sie ng-model verwenden, sollten Sie grundsätzlich einen Punkt in dem von Ihnen zugewiesenen Modell haben. Andernfalls wird der Wert dem lokalen Bereich und nicht dem übergeordneten Bereich zugewiesen. Wenn Sie "ng-include" hinzufügen, wird ein neuer Bereich erstellt, und Sie ordnen die Werte diesem lokalen Bereich und nicht Ihrem ursprünglichen Bereich zu. –

@DustinHodges Das scheint die gleiche Schlussfolgerung zu sein, die ich erreicht habe (siehe meine eigene Antwort) - don verwende den Top-Level-Bereich nicht. Diese Frage (und andere) scheinen für Leute, die die Antwort nicht kennen (wie ich), nicht sehr suchbar zu sein. Es ist sehr nützlich für Leute, die schon wissen, wonach sie suchen müssen, um Leuten, die posten, schnell zu helfen. Ich hoffe, dass diese Frage für zukünftige Fragesteller suchbar ist. – corsiKa

verstanden. Es ist schwer herauszufinden, was bei eckigen Dingen falsch läuft, wenn man anfängt. Es gibt eine Menge Informationen über dieses Problem, google "benutze immer einen Punkt in angularjs". Leider für Sie und andere Anfänger würden Sie nie wissen, nach dem zu suchen. Hoffentlich wird diese Frage und Ihre Antwort andere in die richtige Richtung weisen. –

Gut, das ist seltsam, und ich weiß nicht, warum es nicht funktioniert, aber ich habe einen Trick, der funktioniert finden und ist wahrscheinlich auf lange Sicht eine gute Idee.

Da dies nicht die einzige Ansicht ist, habe ich beschlossen, ein Objekt für die Variablen meiner Ansicht zu erstellen. Ich habe das implizit schon mit view_variable gemacht. Also machte ich mein Controller sieht wie folgt aus:

app.controller('main-controller', function($scope) { 

    $scope.login = {}; 

    $scope.login.email = 'abcd'; 
    $scope.login.password = 'defg'; 
    // snip 

    $scope.exec_login = function() { 
     var email = $scope.login.email; 
     var pass = $scope.login.password; 
     alert('logging in ' + email + ' ' + pass); 
    }

Aktualisierung meiner Form die neuen Variablen verwenden login.email und login.password statt login_email und login_password verursacht sie richtig zu arbeiten.

Während ich noch wissen würde gerne, warum die Top-Level-Variablen scoped nicht richtig aktualisiert wurde, bin ich glücklich diese Abhilfe zu sehen, in der Tat mich Prototyping fortsetzen lassen und, ganz ehrlich, richtig Wenn ich meine Variablen erkläre, werden sich Kopfschmerzen auf der Straße ergeben.

Quelle

2016-07-07 19:19:24 corsiKa

Überprüfen Sie dies: http: // Stackoverflow.com/questions/18128323/Wenn-du-bist-nicht-benutzt-ein-Punkt-in-deinem-eckigenjs-Modelle-du-tust es-falsch- – lintmouse

Controller-Funktion sieht alte Version der Variablen

Antwort

Verwandte Themen