Das Ng-Modell aktualisiert den Controller-Wert nicht

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 searchTextin ändern search.text, dann ein leeres $scope.search = {};Objekt im Controller definieren und voila ... Ich habe keine Ahnung, warum es funktioniert obwohl;]

Controller als Version (empfohlen)

Hier die Vorlage

<div ng-app="example" ng-controller="myController as $ctrl">
    <input type="text" ng-model="$ctrl.searchText" />
    <button ng-click="$ctrl.check()">Check!</button>
    {{ $ctrl.searchText }}
</div>

Die JS

angular.module('example', [])
  .controller('myController', function() {
    var vm = this;
    vm.check = function () {
      console.log(vm.searchText);
    };
  });

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

<input type="text" ng-model="searchText" />
<button ng-click="check(searchText)">Check!</button>
{{ searchText }}

und das in Ihrem Controller

$scope.check = function (searchText) {
    console.log(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

$scope.formData = {};
$scope.check = function () {
  console.log($scope.formData.searchText.$modelValue); //works
}

Vorlage

<input ng-model="formData.searchText"/>
<button ng-click="check()">Check!</button>

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

In Mastering Web Application Development mit AngularJS Buch S.19 wird geschrieben, dass

Vermeiden Sie direkte Bindungen an die Eigenschaften des Bereichs. Die bidirektionale Datenbindung an Objekteigenschaften (in einem Bereich verfügbar gemacht) ist ein bevorzugter Ansatz. Als Faustregel sollte ein Punkt in einem Ausdruck enthalten sein, der für die Anweisung ng-model bereitgestellt wird (z. B. ng-model = "thing.name").

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.

Verwenden thisstatt $scopeArbeiten.

function AppCtrl($scope){
  $scope.searchText = "";
  $scope.check = function () {
    console.log("You typed '" + this.searchText + "'"); // used 'this' instead of $scope
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app>
  <div ng-controller="AppCtrl">
    <input ng-model="searchText"/>
    <button ng-click="check()">Write console log</button>
  </div>
</div>

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 thissich auf diesen Bereich bezieht. Wenn $scopees 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.

Ich hatte das gleiche Problem und es lag daran, dass ich das leere Objekt nicht zuerst oben auf meinem Controller deklarierte:

$scope.model = {}

<input ng-model="model.firstProperty">

Hoffe das wird bei dir funktionieren!

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 .

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?

Da dies niemand erwähnte, kann das Problem durch Hinzufügen $parentzur gebundenen Eigenschaft gelöst werden

<div ng-controller="LoginController">
    <input type="text" name="login" class="form-control" ng-model="$parent.ssn" ng-pattern="/\d{6,8}-\d{4}|\d{10,12}/" ng-required="true" />
    <button class="button-big" type="submit" ng-click="BankLogin()" ng-disabled="!bankidForm.login.$valid">Logga in</button>
</div>

Und der Controller

app.controller("LoginController", ['$scope', function ($scope) {
    $scope.ssn = '';

    $scope.BankLogin = function () {
        console.log($scope.ssn); // works!
    };
}]);

Für mich wurde das Problem gelöst, indem meine Daten in einem Objekt gespeichert wurden (hier "Daten").

NgApp.controller('MyController', function($scope) {

   $scope.my_title = ""; // This don't work in ng-click function called

   $scope.datas = {
      'my_title' : "",
   };

   $scope.doAction = function() {
         console.log($scope.my_title); // bad value
         console.log($scope.datas.my_title); // Good Value binded by'ng-model'
   }
   

});

Ich hoffe es wird helfen

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.

Sie können dies tun, um die Suche in ng-keypressEingabe für Eingabetext und in ng-clickfür das Symbol zu aktivieren :

<input type="text" ng-model="searchText" ng-keypress="keyEnter(this,$event)" />
<button ng-click="check(searchText)">Check!</button>

in the controller
$scope.search = function (searchText) {
        console.log(searchText);
    }
    $scope.keyEnter = function (serachText,$event) {
        var keyCode = $event.which || $event.keyCode;
        if (keyCode === 13) {//KeyCode for Enter key
           console.log(searchText);
        }
    }

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.

<input type="text" ng-model="searchText" value={{searchText}} />

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.

Ich hatte das gleiche Problem ... Die Lösung, die für mich funktioniert hat, ist die Verwendung dieses Schlüsselworts ..........

alert (this.ModelName);