web-dev-qa-db-fra.com

Ng-model indéfini dans le contrôleur

J'ai des "problèmes" lors de la lecture d'un modèle ng à partir du contrôleur.

Je veux faire ça:

<input type="text" ng-model="code">
<button ng-click="setCode()">Login</button>

Et dans mon contrôleur, accédez à cette variable comme ceci:

 $scope.setCode = function(){
    alert($scope.code);
  }

C'est ce que je veux faire mais ma variable de code n'est pas définie.

J'ai trouvé 2 façons d'obtenir que cela fonctionne:

1) Passer la variable en argument

<input type="text" ng-model="code">
<button ng-click="setCode(code)">Login</button>

et:

$scope.setCode = function(code){
    alert(code);
  }

2) Déclarer ma variable en tant qu'objet

<input type="text" ng-model="code.text">
<button ng-click="setCode()">Login</button>

et:

$scope.code = {text: 'foo'};

[...]

$scope.setCode = function(){
    console.log($scope.code);
  }

(Je préfère le second)

Mais je suis un peu confus sur ce que je devrais faire. Est-il possible de déclarer mes objets comme modèles? Je dois déclarer TOUS mes modèles comme des objets?

EDIT: Voici un Plnkr du problème

Dans cet exemple (j'utilise le Ionic framework), je déclare un code de variable avec la valeur test, lorsque je modifie le modèle en entrée et que j'appuie sur le bouton Démarrer, je dois en théorie voir dans une alerte le nouvelle valeur du modèle. Mais ce que je vois, c'est l'ancien.

Merci!

javascriptangularjsionic-framework
20
Mati Tucci

J'ai corrigé votre exemple plnkr en utilisant un modèle d'objet au lieu d'un type primitif.

$scope.model = {};
$scope.model.code = "test";

$scope.setCode = function(){
    alert($scope.model.code);
}

Voir le plnkr .

10
xi.lin

Votre premier exemple fonctionne, voici un plunkr .

Si vous appuyez sur le bouton sans saisir de texte dans le champ de saisie, vous recevez une alerte undefined. $scope.code est défini au moment où vous entrez quelque chose dans son champ lié ng-model="code". 

Vous pouvez également l’initialiser à une valeur par défaut dans votre contrôleur:

$scope.code = 'my default value';
7
nilsK

La directive d'Ionic créera la nouvelle portée. Si vous souhaitez utiliser directement l'objetcode dans le contrôleur, vous devez définir ng-controller sur ion-content dans votre page HTML, et non sur l'état du routeur.

0
Jet Ma