Ng-model value on $scope inside controller is “undefined”

ionic-v1
1

On my studies of Ionic Framework i’m learning about controllers, so, i got this simple code for my HTML (above and below the following code are code generated by ionic, so i didn’t touch it)



          <div class="item item-input-inset">    
              <label  class="item-input-wrapper">
                  <i class="icon ion-locked placeholder-icon"></i>
                  <input type="text" placeholder="Contraseña" ng-model="word">
              </label><br>
          </div>
          
          <div class="col text-center">
              <br><h4><a>¿Olvidaste tu contraseña?</a></h4><br><br><br><br><br>
              <a class="button button-stable button-large" href="templates/Register.html">
              <b>Crear una cuenta gratuita</b></a>
          </div>

       
  </ion-content>

    <ion-footer-bar class="bar-positive tabs">
        <a class="tab-item">
            <h4 style="color:white;" ng-click="registrar()">INICIAR SESIÓN</h4>
        </a>
    </ion-footer-bar>
</div>

And my JavaScript

(function (){
var app = angular.module('starter', ['ionic']);
var app2 = angular.module('nuevo', []);

app.controller('controller', function($scope, $http) {

$scope.registrar = function(){
    $http.post("http://127.0.0.1:8080/php/Conexion.php",{
        correo:$scope.mail, pass:$scope.word,    
    }).success(function(data){
   console.log("exito"); 
   console.log($scope.mail);
    });
}

});
  
app2.controller('registroUsuario', function($scope, $http){

$scope.nuevoUsuario= function(){
    $http.post("http://127.0.0.1:8080/php/RegistroUsuario.php",{
        tipo:$scope.tipo, cedula:$scope.cedula, nombres:$scope.nombre, apellidos:$scope.apellido, email:$scope.email, pass:$scope.contra, indicativo:$scope.indicativo, numero:$scope.numero,    
    }).success(function(data){
        console.log($scope.cedula);
        console.log($scope.nombre);
        console.log($scope.apellido);
        console.log($scope.email);
        console.log($scope.contra);
        console.log($scope.indicativo);
        console.log($scope.numero);
    });
}

});

app.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
 })
}())

As you can see above, it’s a basic login form, i have some troubles with ng-model=“mail” and ng-model=“word” in my first controller registrar() with my $scope values, the function goes to my php file, no problems there, but, just for testing i did console print to see the values of my ng-models and it throws “exito” the firts message and “undefined” for the value of my $scope.mail value, same thing to $scope.word value.

Why is this happening? i’m confused, because my other controller works perfect, i tried to change the value of var

   app = angular.module('starter', ['ionic']);

to

 var app = angular.module('starter', []);

but that gives me an error too. Also tried to declare an var app3 with the value of above, but still nothing.

I hope can you give me a hand with this, thanks for your time.

2

You tried to initialize second controller in separate controller. but you forget to inject it into your app, as I understand it should be something like this:

var app = angular.module('starter', ['ionic', 'nuevo']);
var app2 = angular.module('nuevo', []);

Also please check


the best practises writing angular apps.

3

Thank you man, it helped me out to solve the issue.