Ng-model ne met pas à jour la valeur du contrôleur

"Si vous utilisez ng-model, vous devez avoir un point là."

Faites pointer votre modèle vers un objet.de la propriété et vous serez bon d'aller.

contrôleur

$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 quand les lunettes de l'enfant sont dans les routes de l'enfant play - like ou ng-se répète. L'enfant-portée crée sa propre valeur et un conflit de nom est né comme illustré ici :



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

in Mastering Web Application Development with AngularJS book p. 19, Il est écrit que

éviter les reliures directes aux propriétés de scope. Liaison bidirectionnelle des données les propriétés de l'objet (exposé sur une portée) est une approche privilégiée. En tant que règle générale, vous devriez avoir un point dans une expression à la ng-model directive (par exemple, ng-model="thing.nom").

Scopes sont juste des objets JavaScript, et ils imitent la hiérarchie dom. Selon héritage Prototype JavaScript , les propriétés des portées sont séparées par des portées. Pour éviter cela, pointillé doit utiliser pour lier ng-modèles.

utilisant this au lieu de $scope œuvres.

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 celle-ci. Après les commentaires, j'ai essayé de le reproduire pour comprendre pourquoi il fonctionne, mais pas de chance. Je pense que d'une certaine manière (ne sait pas vraiment pourquoi) un nouvel enfant est généré et this s'entend de la portée. Mais si $scope est utilisé, il désigne en fait parent $scope en raison de la fonctionnalité lexical scope de javascript.

serait génial si quelqu'un ayant ce problème Teste de cette façon et nous informe.

j'ai eu le même problème et c'était dû au fait que je n'ai pas déclaré l'objet vide en premier au sommet de mon contrôleur:

$scope.model = {}

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

J'espère que ça va marcher pour vous!

je suis tombé sur la même question en traitant d'une vue non-triviale (il ya des portées emboîtées). Et finalement découvert cela est une chose connue délicate lors du développement de L'application AngularJS en raison de la nature de prototype-basé héritage de java-script. AngularJS scopes imbriqués sont créés par ce mécanisme. Et la valeur créée à partir du modèle ng est placée dans le champ enfants, sans dire que le champ parent (peut-être celui injecté dans le contrôleur) ne verra pas la valeur, la valeur sera aussi shadow toute propriété avec le même nom défini dans le champ d'application parent si vous n'utilisez pas dot pour appliquer un accès de référence prototype. Pour plus de détails, consultez la vidéo en ligne spécifique pour illustrer ce numéro, http://egghead.io/video/angularjs-the-dot / et commente la suite.

Regardez ce violon http://jsfiddle.net/ganarajpr/MSjqL/

j'ai ( je suppose! ) fait exactement ce que tu faisais et il semble fonctionner. Pouvez-vous vérifier ce qui ne fonctionne pas ici pour vous?

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

});

je Hop il aidera

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

je viens d'avoir ce même problème en utilisant un root_controller lié à l'élément du corps. Puis j'ai utilisé 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 initiale de la portée qui a été modifiée par mon élément ng-model.

pour résoudre le problème, il suffit d'utiliser un contrôleur dédié dans le contenu html chargé par route.

vous pouvez faire cela pour permettre la recherche dans ng-keypress ENTRER pour le texte d'entrée et dans ng-click pour 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' comme une propriété à l'intérieur d'un objet.

mais si je veux le laisser tel quel, une ficelle? j'ai essayé toutes les méthodes mentionnées ici, rien n'a marché.

Mais ensuite j'ai remarqué que le problème est seulement dans l'initiation, donc j'ai juste mis l'attribut de valeur et ça a marché.

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

de cette façon la valeur est mise à '$champ d'application.searchText ' valeur et il est mis à jour lorsque la valeur d'entrée change.

je sais que c'est une solution, mais ça a marché pour moi..

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

alert(ce.ModelName);