Le modèle Ng ne met pas à jour la valeur du contrôleur

Question probablement idiote, mais j'ai mon formulaire html avec une simple entrée et un bouton:

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

Puis dans le contrôleur (le modèle et le contrôleur sont appelés depuis routeProvider):

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

Pourquoi la vue est-elle mise à jour correctement mais non définie dans la console lorsque je clique sur le bouton?

Merci!

Mise à jour: On dirait que j'ai réellement résolu ce problème (avant j'ai dû trouver des solutions) avec: Je n'ai eu qu'à changer le nom de ma propriété de searchTextà search.text, puis définir un $scope.search = {};objet vide dans le contrôleur et le tour est joué ... Je ne sais pas pourquoi cela fonctionne bien que ;]

Contrôleur comme version (recommandé)

Voici le modèle

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

Le JS

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

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

Le mieux sera d'utiliser un composant avec Angular 2.x ou Angular 1.5 ou supérieur

À l'ancienne (NON recommandé)

Ceci n'est PAS recommandé car une chaîne est une primitive, il est fortement recommandé d'utiliser un objet à la place

Essayez ceci dans votre balisage

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

et cela dans votre manette

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

"Si vous utilisez ng-model, vous devez avoir un point dedans."
Faites pointer votre modèle vers une propriété object.property et vous serez prêt à partir.

Manette

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

Modèle

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

Cela se produit lorsque des étendues enfants sont en jeu - comme des routes enfants ou des répétitions ng. La portée enfant crée sa propre valeur et un conflit de nom naît comme illustré ici :

Voir ce clip vidéo pour plus: https://www.youtube.com/watch?v=SBwoFkRjZvE&t=3m15s

Dans Mastering Web Application Development with AngularJS book p.19, il est écrit que

Évitez les liaisons directes aux propriétés de la portée. La liaison de données bidirectionnelle aux propriétés de l'objet (exposées sur une étendue) est une approche préférée. En règle générale, vous devriez avoir un point dans une expression fournie à la directive ng-model (par exemple, ng-model = "thing.name").

Les étendues ne sont que des objets JavaScript et imitent la hiérarchie dom. Selon l' héritage du prototype JavaScript , les propriétés des étendues sont séparées par des étendues. Pour éviter cela, la notation par points doit utiliser pour lier les modèles ng.

Utilisation thisau lieu de $scopetravaux.

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>

Edit: Au moment d'écrire cette réponse, j'avais une situation beaucoup plus compliquée que cela. Après les commentaires, j'ai essayé de le reproduire pour comprendre pourquoi ça marche, mais pas de chance. Je pense thisqu'en quelque sorte (je ne sais pas vraiment pourquoi) une nouvelle portée enfant est générée et fait référence à cette portée. Mais s'il $scopeest utilisé, il fait référence à la portée $ parent en raison de la fonctionnalité de portée lexicale de javascript .

Ce serait génial si quelqu'un ayant ce problème testait de cette façon et nous en informer.

J'ai eu le même problème et c'est parce que je n'ai pas déclaré l'objet vide en premier en haut de mon contrôleur:

$scope.model = {}

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

J'espère que cela fonctionnera pour vous!

Je suis tombé sur le même problème lorsqu'il s'agissait d'une vue non triviale (il existe des étendues imbriquées). Et finalement découvert que c'est une chose connue et délicate lors du développement d'une application AngularJS en raison de la nature de l'héritage basé sur prototype de java-script. Les portées imbriquées AngularJS sont créées via ce mécanisme. Et la valeur créée à partir de ng-model est placée dans la portée des enfants, sans dire que la portée parent (peut-être celle injectée dans le contrôleur) ne verra pas la valeur, la valeur masquera également toute propriété avec le même nom défini dans la portée parent si elle n'utilise pas dot pour appliquer un accès de référence au prototype. Pour plus de détails, consultez la vidéo en ligne spécifique pour illustrer ce problème, http://egghead.io/video/angularjs-the-dot/ et les commentaires qui en découlent.

Jetez un oeil à ce violon http://jsfiddle.net/ganarajpr/MSjqL/

J'ai (je suppose!) Fait exactement ce que vous faisiez et cela semble fonctionner. Pouvez-vous vérifier ce qui ne fonctionne pas ici pour vous?

Comme personne ne l'a mentionné, le problème peut être résolu en ajoutant $parentà la propriété liée

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

Et le contrôleur

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

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

Pour moi, le problème a été résolu en stockant mes données dans un objet (ici "données").

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

});

J'espère que ça va aider

Je viens d'avoir ce problème avec un root_controller lié à l'élément body. Ensuite, j'utilisais ng-view avec le routeur angulaire. Le problème est qu'angular crée TOUJOURS une nouvelle portée quand il insère le html dans l'élément ng-view. En conséquence, ma fonction "check" a été définie sur la portée parent de la portée qui a été modifiée par mon élément ng-model.

Pour résoudre le problème, utilisez simplement un contrôleur dédié dans le contenu html chargé par route.

Vous pouvez le faire pour activer la recherche en ng-keypressentrée pour le texte d'entrée et en ng-clickpour l'icône:

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

J'ai eu le même problème.
La bonne façon serait de définir le «searchText» pour être une propriété à l'intérieur d'un objet.

Mais si je veux le laisser tel quel, une chaîne? eh bien, j'ai essayé toutes les méthodes mentionnées ici, rien n'a fonctionné.
Mais ensuite, j'ai remarqué que le problème ne concerne que l'initiation, donc je viens de définir l'attribut value et cela a fonctionné.

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

De cette façon, la valeur est simplement définie sur la valeur '$ scope.searchText' et elle est mise à jour lorsque la valeur d'entrée change.

Je sais que c'est une solution de contournement, mais cela a fonctionné pour moi ..

J'étais confronté au même problème ... La résolution qui a fonctionné pour moi est d'utiliser ce mot-clé ..........

alerte (this.ModelName);