Wahrscheinlich dumme Frage, aber ich habe mein HTML-Formular mit einfacher Eingabe und Schaltfläche:
<input type="text" ng-model="searchText" />
<button ng-click="check()">Check!</button>
{{ searchText }}
Dann im Controller (Vorlage und Controller werden von routeProvider aufgerufen):
$scope.check = function () {
console.log($scope.searchText);
}
Warum wird die Ansicht in der Konsole korrekt aktualisiert, aber nicht definiert, wenn Sie auf die Schaltfläche klicken?
Vielen Dank!
Update: Scheint, als hätte ich dieses Problem tatsächlich gelöst (bevor ich einige Problemumgehungen finden musste) mit: Ich musste nur meinen Eigenschaftsnamen von searchText
in ändern search.text
, dann ein leeres $scope.search = {};
Objekt im Controller definieren und voila ... Ich habe keine Ahnung, warum es funktioniert obwohl;]
javascript
angularjs
data-binding
angular-ngmodel
Alchemie
quelle
quelle
searchText
in ändere.search.text
Irgendeine Idee warum?voila
, nichtvuala
,wolla
usw.Antworten:
Controller als Version (empfohlen)
Hier die Vorlage
Die JS
Ein Beispiel: http://codepen.io/Damax/pen/rjawoO
Am besten verwenden Sie Komponenten mit Angular 2.x oder Angular 1.5 oder höher
########Alter Weg (NICHT empfohlen)
Dies wird NICHT empfohlen, da eine Zeichenfolge ein Grundelement ist. Es wird dringend empfohlen, stattdessen ein Objekt zu verwenden
Versuchen Sie dies in Ihrem Markup
und das in Ihrem Controller
quelle
searchText
?"Wenn Sie ng-model verwenden, müssen Sie einen Punkt darin haben."
Stellen Sie Ihr Modell auf eine object.property und Sie können loslegen.
Regler
Vorlage
Dies geschieht, wenn untergeordnete Bereiche im Spiel sind - wie untergeordnete Routen oder ng-Wiederholungen. Der untergeordnete Bereich erstellt seinen eigenen Wert und ein Namenskonflikt entsteht wie hier dargestellt :
Weitere Informationen finden Sie in diesem Videoclip: https://www.youtube.com/watch?v=SBwoFkRjZvE&t=3m15s
quelle
In Mastering Web Application Development mit AngularJS Buch S.19 wird geschrieben, dass
Bereiche sind nur JavaScript-Objekte und ahmen die Dom-Hierarchie nach. Gemäß JavaScript Prototype Inheritance werden die Eigenschaften von Bereichen durch Bereiche getrennt. Um dies zu vermeiden, sollte die Punktnotation zum Binden von ng-Modellen verwendet werden.
quelle
Verwenden
this
statt$scope
Arbeiten.Bearbeiten: Zum Zeitpunkt des Schreibens dieser Antwort hatte ich eine viel kompliziertere Situation als diese. Nach den Kommentaren habe ich versucht, es zu reproduzieren, um zu verstehen, warum es funktioniert, aber kein Glück. Ich denke, irgendwie (ich weiß nicht wirklich warum) wird ein neuer untergeordneter Bereich generiert, der
this
sich auf diesen Bereich bezieht. Wenn$scope
es jedoch verwendet wird, bezieht es sich aufgrund der lexikalischen Bereichsfunktion von Javascript tatsächlich auf den übergeordneten $ scope .Wäre toll, wenn jemand mit diesem Problem auf diese Weise testet und uns informiert.
quelle
$scope
einen neuen Bereich erstellt (dh in Funktioncheck()
,this
bezieht sich auf einen Bereich, der ein Kind Umfang ist$scope
). Wieso ist es so? Können Sie einige Erklärungen geben?this.searchText = "something else"
oder sogar wenn$scope.searchText = "something else"
, wird die Ansicht nicht aktualisiert. Können Sie dieses Problem erklären?Ich hatte das gleiche Problem und es lag daran, dass ich das leere Objekt nicht zuerst oben auf meinem Controller deklarierte:
Hoffe das wird bei dir funktionieren!
quelle
Ich bin auf dasselbe Problem gestoßen, als ich mich mit einer nicht trivialen Ansicht befasst habe (es gibt verschachtelte Bereiche). Und schließlich wurde festgestellt, dass dies bei der Entwicklung der AngularJS-Anwendung aufgrund der Art der prototypbasierten Vererbung von Java-Skripten eine schwierige Sache ist. Durch diesen Mechanismus werden verschachtelte AngularJS-Bereiche erstellt. Der aus dem ng-Modell erstellte Wert wird im untergeordneten Bereich platziert, ohne dass der übergeordnete Bereich (möglicherweise der in den Controller eingefügte) den Wert nicht sieht. Der Wert schattiert auch alle Eigenschaften mit demselben Namen, die im übergeordneten Bereich definiert sind, wenn kein Punkt verwendet wird um einen Referenzzugriff für einen Prototyp zu erzwingen. Weitere Informationen finden Sie im Online-Video http://egghead.io/video/angularjs-the-dot/ und in den Kommentaren , die dieses Problem veranschaulichen .
quelle
Schauen Sie sich diese Geige an http://jsfiddle.net/ganarajpr/MSjqL/
Ich habe (ich nehme an!) Genau das getan, was Sie getan haben, und es scheint zu funktionieren. Können Sie überprüfen, was hier für Sie nicht funktioniert?
quelle
Da dies niemand erwähnte, kann das Problem durch Hinzufügen
$parent
zur gebundenen Eigenschaft gelöst werdenUnd der Controller
quelle
Für mich wurde das Problem gelöst, indem meine Daten in einem Objekt gespeichert wurden (hier "Daten").
Ich hoffe es wird helfen
quelle
Ich hatte gerade genau dieses Problem mit einem root_controller, der an das body-Element gebunden ist. Dann habe ich ng-view mit dem Winkelrouter verwendet. Das Problem ist, dass eckig IMMER einen neuen Bereich erstellt, wenn der HTML-Code in das ng-view-Element eingefügt wird. Infolgedessen wurde meine "Check" -Funktion für den übergeordneten Bereich des Bereichs definiert, der von meinem ng-model-Element geändert wurde.
Um das Problem zu lösen, verwenden Sie einfach einen dedizierten Controller in routengeladenen HTML-Inhalten.
quelle
Sie können dies tun, um die Suche in
ng-keypress
Eingabe für Eingabetext und inng-click
für das Symbol zu aktivieren :quelle
Ich hatte das gleiche Problem.
Der richtige Weg wäre, den 'searchText' als eine Eigenschaft innerhalb eines Objekts festzulegen.
Aber was ist, wenn ich es so lassen möchte, wie es ist, eine Schnur? Nun, ich habe jede einzelne hier erwähnte Methode ausprobiert, nichts hat funktioniert.
Aber dann habe ich festgestellt, dass das Problem nur in der Initiierung liegt, also habe ich nur das Wertattribut festgelegt und es hat funktioniert.
Auf diese Weise wird der Wert nur auf den Wert '$ scope.searchText' gesetzt und aktualisiert, wenn sich der Eingabewert ändert.
Ich weiß, dass es eine Problemumgehung ist, aber es hat bei mir funktioniert.
quelle
Ich hatte das gleiche Problem ... Die Lösung, die für mich funktioniert hat, ist die Verwendung dieses Schlüsselworts ..........
alert (this.ModelName);
quelle