Value $ Scope of ng-model Throw "Undefined" in the Controller

0

In my studies of the Ionic Framework I am learning about controllers, I have been working a simple example of a page with a login, then my HTML code, I do not leave it anymore because the rest was generated by Ionic and I did not touch it at all

 <div ng-controller="controller">    
  <ion-content>
    <img class="indexImg" src="img/saludoIndex.jpg">
    <br><br>
          <div class="item item-input-inset">    
              <label class="item-input-wrapper">
                  <i class="icon ion-at placeholder-icon"></i>
                  <input type="text" placeholder="Dirección de email" ng-model="mail">
              </label>
          </div>

          <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 the respective 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();
    }
  });
 })
}())

Specifically speaking, I have problems with the "controller" controller where, with the register () function, I send data to a PHP file to perform operations in the database.

Before that I decided to test the controller showing the value of $ scope.mail but this one throws "undefined" the same for $ scope.word, the only thing it shows is the console.log as I call it, that means that connects successfully with the PHP file but is not sending me the data I need to validate in the query (the values $ scope.mail and $ scope.word.)

The strange thing is that the other configured controller works for me and does the operation in the database sending the values of the ng-model that another form has.

I tried changing

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

for

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

but it throws me wrong. I'm short of ideas, maybe I need to configure something or remove something, I do not know, I've been with this framework for a short time but it seems interesting, I hope you can give me a hand, any suggestion is welcome.

Thanks for your time.

    
asked by Gutierrez 18.11.2016 в 04:31
source

2 answers

0

Seeing your code I realize that when your data is within <ion-content> fail, if you remove that label everything will work. Now, this should not happen, but I told you that maybe that's not the right way to order your project.

I recommend separating your code (which is by default as ordered by Ionic)

www
   templates
       login.html
       registro.html
   js
       app.js
       controllers.js

In the file controller.js you define all the controllers for each one of the views or templates that you have for example:

angular.module('starter.controllers', [])
.controller('LoginCtrl', 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);
        });
    }
})

.controller('RegistroCtrl', 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);
        });
    }

});

Then in the file app.js you inject the dependency of started.controllers which is what we defined previously.

angular.module('starter', ['ionic', 'ngCordova', 'starter.controllers'])
.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
    $stateProvider

    .state('login', {
        url: '/login',
        cache: false,
        templateUrl: "templates/login_inicio.html",
        controller: "LoginCtrl"
    })

    .state('registro', {
        url: '/registro',
        cache: false,
        templateUrl: "templates/registro.html",
        controller: "RegistroCtrl"
    });
    $urlRouterProvider.otherwise('/login');
});

Defines the name of the view, the url it will take, the template it will occupy and which controller it will have. Finally your view would be something like this:

<ion-view view-title="Login" name="login-view" cache-view="false">
    <ion-content>
    <img class="indexImg" src="img/saludoIndex.jpg">
    <br><br>
          <div class="item item-input-inset">    
              <label class="item-input-wrapper">
                  <i class="icon ion-at placeholder-icon"></i>
                  <input type="text" placeholder="Dirección de email" ng-model="mail">
              </label>
          </div>

          <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>
</ion-view>

With this you define that for each view there is a controller, which handles the values of $scope . This is more modular your project, easy to read because everything is where it should be and there is nothing mixed.

    
answered by 18.11.2016 / 13:22
source
0

I think the problem you have is with the scope scope. Try assigning the values to an object before passing it and then use the object instead of the scope.

    
answered by 18.11.2016 в 11:38