How to pass parameters in executed function via ng-click when it is in a list of buttons?

Question

Using the IONIC framework I have the following situation, in an index.html there is a list of input items where the user will inform their respective username, e-mail and password and in a certain button type Submit is called the function savePerson(registration) passing the registration parameter that should contain the information typed by the user to save the record, however in the App.js responsible for controlling this operation, the registration parameter arrives invalid in the function savePerson.

Could someone tell me how to solve this problem facing this scenario?

Below follows the code snippets

---

INDEX.HTML

<ion-pane class="login-custom">
  <ion-content>
    <h1>Minha Pelada <span>picapau amarelo(domingo)</span></h1>
    <ion-list class= "list-inset">
      <ion-item class= "item-input">
        <i class= "icon ion-ios-person-outline placeholder-icon"></i>
        <input type= "text" name="username" class="form-control" ng-model="cadastro.username" id="username" placeholder= "username">
      </ion-item>
      <ion-item class = "item-input">
        <i class = "icon ion-ios-email-outline placeholder-icon"></i>
        <input type = "text" name="email" class="form-control" ng-model="cadastro.email" id="email" placeholder= "email">
      </ion-item>
      <ion-item class = "item-input">
        <i class = "icon ion-ios-locked-outline placeholder-icon"></i>
        <input type = "password" name="senha" class="form-control" ng-model="cadastro.senha" id="senha" placeholder= "senha">
      </ion-item>
      <ion-item class= "item-button button-first">
        <button type="submit" class= "button button-block button-calm" ng-click="savePerson(cadastro)"> Criar conta</button>
       </ion-item>
        <button class= "button button-block icon-left ion-social-facebook button-positive"> Entrar com Facebook </button> 
      </ion-item>
      <ion-item class= "item-button">
        <button class= "button button-block button-clear"> Já tem uma Conta? Clique aqui para Entrar em MinhaPelada </button>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-pane>

---

APP.JS

  $scope.savePerson = function(params) {
    alert('Usuário Informado: ' + params.username + ' Senha Informada: ' + params.senha );
    var PeopleObject = Parse.Object.extend("PeopleObject");
    var person = new PeopleObject();
    person.set("username", username);
    person.set("senha", senha);
    person.save(null, {});
};

---

GOOGLE CHROME BROWSER CONSOLE ERROR

TypeError: Cannot read property 'username' of undefined
    at ChildScope.$scope.savePerson (app.js:34)
    at fn (eval at compile (ionic.bundle.js:27643), <anonymous>:4:300)
    at ionic.bundle.js:65429
    at ChildScope.$eval (ionic.bundle.js:30400)
    at ChildScope.$apply (ionic.bundle.js:30500)
    at HTMLButtonElement.<anonymous> (ionic.bundle.js:65428)
    at defaultHandlerWrapper (ionic.bundle.js:16792)
    at HTMLButtonElement.eventHandler (ionic.bundle.js:16780)
    at triggerMouseEvent (ionic.bundle.js:2953)
    at tapClick (ionic.bundle.js:2942)
(anonymous) @ ionic.bundle.js:26799
(anonymous) @ ionic.bundle.js:23512
$apply @ ionic.bundle.js:30505
(anonymous) @ ionic.bundle.js:65428
defaultHandlerWrapper @ ionic.bundle.js:16792
eventHandler @ ionic.bundle.js:16780
triggerMouseEvent @ ionic.bundle.js:2953
tapClick @ ionic.bundle.js:2942
tapTouchEnd @ ionic.bundle.js:3069

Answer 1

The attribute params of function savePerson is as undefined, params is a reference to the object cadastro that you spend in ng-click="savePerson(cadastro)" then the cadastro is undefined.

The mistake

The error is because you are trying to access attributes of an object that has not been created.

Solution:

In controller in app.js initiate the object cadastro:

$scope.cadastro = {};

Answer 2

Glauber, I discovered the reason for the new error, was the region where was started the registration object, I had put in the wrong place, I made the change of this location and now the system already recognizes the parameters passed in the registration object. Thank you for your tip! Below is the portion of the corrected code:

example.controller("ExampleController", function($scope) {

      $scope.cadastro = {};

      $scope.savePerson = function(cadastro) {

        alert('Usuário Informado: ' + cadastro.username + ' Senha Informada: ' + cadastro.senha );

        var PeopleObject = Parse.Object.extend("PeopleObject");
        var person = new PeopleObject();

        person.set("username", cadastro.username);
        person.set("senha", cadastro.senha);
        person.save(null, {});

      };