ng-model n'est pas définie dans le contrôleur

Je suis en utilisant ionique et j'ai l'affichage suivant:

<ion-view hide-nav-bar="true" ng-controller="loginController" class="login-view">
  <ion-content class="padding">

    <div class="row row-center">
      <div class="col">

        <div id="logo"></div>

        <form>
          <div class="list">
            <label class="item item-input">
              <input type="text" placeholder="Membership No" ng-model="membershipNo">
            </label>
            <label class="item item-input">
              <input type="password" placeholder="Password" ng-model="password">
            </label>
          </div>

          <button class="button button-block button-positive button-login" ng-click="login()">
            Login
          </button>
        </form>

      </div>
    </div>

  </ion-content>
</ion-view>

Et mon contrôleur:

app.controller('loginController', ['$scope', '$localstorage',
    function($scope, $localstorage) {

        $scope.membershipNo;
        $scope.password;

        $scope.login = function () {
            console.log("User logged in with membership no: " + $scope.membershipNo +
    "\n and password: " + $scope.password);
        }

    }
]);

Ce que je ne comprends pas, c'est que lorsque je clique sur le bouton, la fonction de connexion est appelé correctement. Aussi, si dans le contrôleur, je vais définir $scope.membershipNo à quelque chose comme "Banana Pancake", on fait des mises à jour.

Encore lorsque la fonction de connexion fonctionne en fait, est dit que membershipNo et le mot de passe ne sont pas définis. Je suis assez nouveau dans Angulaire Ionique et donc je sais que c'est probablement un n00b erreur...

Vous êtes de la liaison à un primitif. Ne pas le faire. codelord.net/2014/05/10/... (en gros, la valeur de membershipNo est passé par valeur, donc ce qui est changé, c'est pas la référence dans le contrôleur. Créer un Objet, quelque chose comme $scope.user = {} et passer ng-model="user.membershipNo", sinon Angulaire ne peut pas envoyer des données vers le contrôleur...)
double possible de Ng-model n'a pas de mise à jour de la valeur de contrôleur
Ce que @DRobinson dit. Vous pouvez éviter cela en utilisant controllerAs-syntaxe, également rendre votre code plus élégant et à l'avenir dans le processus 🙂
qui ne fonctionne que si rien entre les ngController et la ngModel crée un nouveau champ d'application. C'est une très mauvaise pratique. Vous voulez vraiment "points" dans votre ngModel, à chaque fois. Toujours. stackoverflow.com/a/17186640/624590 (Elle aussi de ne pas travailler pour le Doyen parce que ionContent crée un champ.)
J'ai déjà possédé un télé-portée comme un gamin, mais il n'a jamais vraiment pu voir de très loin. Elle avait l'air cool si debout dans ma chambre.

OriginalL'auteur Tiwaz89 | 2015-08-13

41

J'ai eu exactement la même question récemment, et c'est probablement une solution:
https://stackoverflow.com/a/22768720/552936

Modifié citation:
"Si vous utilisez ng-model, vous devez avoir un point là-bas."
Faire de votre modèle de point pour un object.property et vous serez bon d'aller.

Contrôleur
```
$scope.formData = {};
$scope.login = function () {
  console.log("User logged in with membership no: " + $scope.formData.membershipNo +
  "\n and password: " + $scope.formData.password);
 }
```
Modèle
```
<input type="text" placeholder="Membership No" ng-model="formData.membershipNo">
<input type="password" placeholder="Password" ng-model="formData.password">
```
Bien que cela permettra de résoudre le problème, il n'a pas vraiment d'apporter une réponse pourquoi il a échoué dans la première place.
Tout comme @DRobinson dit et comme votre exemple ci-dessus montre, j'ai pris membershipNo et le mot de passe et enveloppé dans une " informations d'identification de l'objet et maintenant comme par magie tout fonctionne.. mais POURQUOI!?
Ah, tant pis, il l'a expliqué ci-dessus..

OriginalL'auteur mbajur

Veuillez vérifier ce code a fonctionné pour moi:

<div class="row row-center">
  <div class="col">

    <div id="logo"></div>

    <form>
      <div class="list">
        <label class="item item-input">
          <input type="text" placeholder="Membership No" ng-model="data.membershipNo">
        </label>
        <label class="item item-input">
          <input type="password" placeholder="Password" ng-model="data.password">
        </label>
      </div>

      <button class="button button-block button-positive button-login" ng-click="login()">
        Login
      </button>
    </form>

  </div>
</div>

et dans votre contrôleur:

app.controller('loginController', ['$scope',
  function($scope) {
    $scope.data={};
  $scope.login = function () {
    console.log("User logged in with membership no: " + $scope.data.membershipNo +
    "\n and password: " + $scope.data.password);
  }

}]);

cela fonctionne et la bonne réponse

OriginalL'auteur Anil kumar

Vous devez définir votre $portée variables comme ceci dans votre contrôleur:

$scope.membershipNo = '';
$scope.password = '';

Pour votre contrôleur ressemblerait à:

app.controller('loginController', ['$scope', '$localstorage',
  function($scope, $localstorage) {

  $scope.membershipNo = '';
  $scope.password = '';
  $scope.login = function () {
    console.log("User logged in with membership no: " + $scope.membershipNo +
    "\n and password: " + $scope.password);
  }

}]);

Je n'ai essayez de faire cela, alors la fonction imprime seulement les valeurs vides et pas vraiment ce que l'utilisateur a entré...?

OriginalL'auteur mhx

Hé Jean,jetez un oeil de ce que votre code fonctionne ici

       <ion-view ng-app="app" hide-nav-bar="true" ng-controller="loginController" class="login-view">
      <ion-content class="padding">

        <div class="row row-center">
          <div class="col">

            <div id="logo"></div>

            <form>
              <div class="list">
                <label class="item item-input">
                  <input type="text" placeholder="Membership No" ng-model="membershipNo">
                </label>
                <label class="item item-input">
                  <input type="password" placeholder="Password" ng-model="password">
                </label>
              </div>

              <button class="button button-block button-positive button-login" ng-click="login()">
                Login
              </button>
            </form>

          </div>
        </div>

      </ion-content>
    </ion-view> 


var app= angular.module("app",[]);
    app.controller('loginController', ['$scope', 
      function($scope, $localstorage) {

      $scope.membershipNo;
      $scope.password;
      $scope.login = function () {
        alert("User logged in with membership no: " + ($scope.membershipNo || '') +
        "\n and password: " + ($scope.password || ''));
      }

    }]);

pourriez-vous ajouter une explication à aider le "demandeur" afin de comprendre ce que vous avez fait et pourquoi - de sorte que nous pouvons tous apprendre de lui
Salut Ry8806, C'est un concept typique de l'héritage. Comme l' @mbajur faire dans son exemple en faisant un objet. C'est une habitude en javascript angularjs utilisé. Si les hiérarchies utilisées dans vous code comme la relation entre l'enfant étendues & parent étendues sont entretenus correctement, alors il devrait y avoir aucun problème. Sinon, vous obtenez ce type de problème dans angularjs de perdre les propriétés de l'étendue de la valeur. Mais si vous pouvez le voir je viens de faire un simple contrôleur ensuite, c'est le travail correctement. Et je ne sais pas exactement ce que jean veut faire. Mais dans l'extrait de code, il est ajouté n'avoir aucun problème.

OriginalL'auteur Akshay Dhankhar

$scope.user = {};
$scope.submitForm = function (isValid) {
   if (($scope.user.name || '').length > 0){ //Code }
}

OriginalL'auteur Hakan

Vous devez vous connecter pour publier un commentaire.