Ng-model non aggiorna il valore del controller

Probabilmente domanda stupida, ma ho il mio modulo html con input e pulsante semplici:

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

Quindi nel controller (modello e controller vengono chiamati da routeProvider):

$scope.check = function () {
    console.log($scope.searchText);
}

Perché vedo la vista aggiornata correttamente ma non definita nella console quando faccio clic sul pulsante?

Grazie!

Aggiornamento: sembra che io abbia effettivamente risolto quel problema (prima dovevo trovare alcune soluzioni alternative) con: Ho dovuto solo cambiare il nome della mia proprietà da searchTexta search.text, quindi definire un $scope.search = {};oggetto vuoto nel controller e voilà ... Non ho idea del perché funzioni anche se ;]

Controller come versione (consigliato)

Ecco il modello

<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>

Il JS

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

Un esempio: http://codepen.io/Damax/pen/rjawoO

Il migliore sarà utilizzare il componente con Angular 2.xo Angular 1.5 o superiore

Vecchio modo (NON consigliato)

Questo NON è raccomandato perché una stringa è una primitiva, si consiglia vivamente di usare un oggetto

Prova questo nel tuo markup

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

e questo nel tuo controller

$scope.check = function (searchText) {
    console.log(searchText);
}

"Se usi ng-model, devi avere un punto lì dentro."
Fai in modo che il tuo modello punti a un oggetto.proprietà e sarai a posto.

controllore

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

Modello

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

Ciò accade quando sono in gioco ambiti secondari, ad esempio percorsi secondari o ripetizioni ng. L'ambito figlio crea il proprio valore e nasce un conflitto di nomi come illustrato qui : guarda

questo video per ulteriori informazioni: https://www.youtube.com/watch?v=SBwoFkRjZvE&t=3m15s

In Mastering Sviluppo di applicazioni Web con il libro AngularJS p.19, è scritto che

Evita i collegamenti diretti alle proprietà dell'ambito. L'approccio preferito è l'associazione di dati bidirezionali alle proprietà dell'oggetto (esposte su un ambito). Come regola empirica, dovresti avere un punto in un'espressione fornita alla direttiva ng-model (ad esempio, ng-model = "thing.name").

Gli ambiti sono solo oggetti JavaScript e imitano la gerarchia dom. Secondo l' ereditarietà del prototipo JavaScript , le proprietà degli ambiti sono separate attraverso gli ambiti. Per evitare ciò, la notazione punto dovrebbe usare per legare i modelli ng.

Utilizzando al thisposto di $scopeopere.

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>

Modificare: Al momento in cui scrivevo questa risposta, avevo una situazione molto più complicata di questa. Dopo i commenti, ho provato a riprodurlo per capire perché funziona, ma senza fortuna. Penso che in qualche modo (non so davvero perché) venga generato un nuovo ambito figlio e si thisriferisca a tale ambito. Ma se $scopeviene utilizzato, in realtà si riferisce all'ambito $ parent a causa dell'ambito lessicale di javascript funzionalità .

Sarebbe bello se qualcuno avesse questo problema test in questo modo e informarci.

Ho avuto lo stesso problema ed è stato dovuto al fatto che non ho dichiarato l'oggetto vuoto prima nella parte superiore del controller:

$scope.model = {}

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

Spero che questo funzioni per te!

Mi sono imbattuto nello stesso problema quando ho a che fare con una vista non banale (ci sono ambiti nidificati). E finalmente ho scoperto che questa è una cosa nota quando si sviluppa un'applicazione AngularJS a causa della natura dell'eredità basata su prototipo di java-script. Gli ambiti nidificati AngularJS vengono creati tramite questo meccanismo. E il valore creato da ng-model viene inserito nell'ambito figlio, senza dire che l'ambito padre (forse quello iniettato nel controller) non vedrà il valore, il valore ombreggerà anche qualsiasi proprietà con lo stesso nome definito nell'ambito padre se non usi il punto per imporre un accesso di riferimento al prototipo. Per maggiori dettagli, controlla il video online specifico per illustrare questo problema, http://egghead.io/video/angularjs-the-dot/ e i commenti che seguono.

Dai un'occhiata a questo violino http://jsfiddle.net/ganarajpr/MSjqL/

Ho (suppongo!) Fatto esattamente quello che stavi facendo e sembra funzionare. Puoi controllare cosa non funziona qui per te?

Poiché nessuno lo ha menzionato, il problema può essere risolto aggiungendo $parentalla proprietà associata

<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>

E il controller

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

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

Per me il problema è stato risolto immagazzinando i miei dati in un oggetto (qui "dati").

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'
   }
   

});

Spero che possa aiutare

Ho appena avuto questo problema usando un root_controller associato all'elemento body. Quindi stavo usando ng-view con il router angolare. Il problema è che l'angolazione crea SEMPRE un nuovo ambito quando inserisce l'html nell'elemento ng-view. Di conseguenza, la mia funzione "check" è stata definita sull'ambito padre dell'ambito che è stato modificato dal mio elemento ng-model.

Per risolvere il problema, basta usare un controller dedicato all'interno del contenuto html caricato in route.

Puoi farlo per abilitare la ricerca in ng-keypressimmettere per il testo di input e in ng-clickper l'icona:

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

Ho avuto lo stesso problema.
Il modo corretto sarebbe impostare "searchText" come proprietà all'interno di un oggetto.

E se volessi lasciarlo così com'è, una stringa? bene, ho provato ogni singolo metodo menzionato qui, niente ha funzionato.
Ma poi ho notato che il problema è solo nell'iniziazione, quindi ho appena impostato l'attributo value e ha funzionato.

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

In questo modo il valore è appena impostato su "$ scope.searchText" e viene aggiornato quando cambia il valore di input.

So che è una soluzione alternativa, ma ha funzionato per me ..

Stavo affrontando lo stesso problema ... La risoluzione che ha funzionato per me è usare questa parola chiave ..........

alert (this.ModelName);