Error calling function in onclick Ionic

Question

I have a menu with several items, each item of this has a onclick EX:

<ion-side-menus>

  <ion-side-menu-content text-align="center">
    <ion-nav-bar class="bar-calm" aling-title="left">
      <ion-nav-back-button>
      </ion-nav-back-button>

      <ion-nav-buttons side="left">
        <button class="button button-clear button-icon light ion-navicon" menu-toggle="left"></button>
      </ion-nav-buttons>

    </ion-nav-bar>

    <ion-nav-view name="menuContent"></ion-nav-view>
  </ion-side-menu-content>


  <ion-side-menu side="left">

    <ion-header-bar class="bar-calm">
      <h1 class="title">Menu</h1>
    </ion-header-bar>

    <ion-content>
      <ion-list>
        <ion-item href="#/menu/home" class="menu" menu-close>
          <i class="ion-home"></i> Inicio
        </ion-item>
        <ion-item href="#/menu/login" class="menu" menu-close>
          LOGIN
        </ion-item>
        <ion-item href="#/menu/clientes" class="menu" menu-close onclick="listaLeitura('clientes')">
          <i class="ion-person-stalker"></i> Clientes
        </ion-item>
        <ion-item href="#/menu/produtos" class="menu" menu-close onclick="listaLeitura('produtos')">
          <i class="ion-pricetags"></i> Produtos
        </ion-item>
        <ion-item href="#/menu/pedidos" class="menu" menu-close>
          <i class="ion-bag"></i> Pedidos
        </ion-item>
      </ion-list>
    </ion-content>

  </ion-side-menu>

</ion-side-menus>

And I have a file called controller.js which is declared in my index where the function is:

(function() {
  "use strict";

  angular.module("myApp").controller("initCtrl", function($scope, Data, $ionicModal, $location, DBLocalLoginDeUsuario, $ionicScrollDelegate) {
    $scope.home = "Contatos";
    $scope.perfil = "Perfil";
    $scope.contatos = [];
    $scope.myswipe = true;
    $scope.paginacao = true;

    function listaLeitura(acao) {
      $scope.loadMore = function() {
        if (acao == 'produtos') {
          var params = {
            acao: 'produtos',
            counter: $scope.produtos.length,
            //token:"1f3d2gs3f2fg3as2fdg3re2t1we46er45"
          };

          Data.getData(params).success(function(data) {
            if (data.length != 0) {
              angular.forEach(data, function(result) {
                $scope.contatos.push(result);
              });
              $scope.paginacao = true;
            } else {
              $scope.paginacao = false;
            }
            $scope.$broadcast('scroll.infiniteScrollComplete');
          });
        };

        if (acao == 'clientes') {
          var params = {
            acao: 'clientes',
            counter: $scope.clientes.length,
            //token:"1f3d2gs3f2fg3as2fdg3re2t1we46er45"
          };

          Data.getData(params).success(function(data) {
            if (data.length != 0) {
              angular.forEach(data, function(result) {
                $scope.clientes.push(result);
              });
              $scope.paginacao = true;
            } else {
              $scope.paginacao = false;
            }
            $scope.$broadcast('scroll.infiniteScrollComplete');
          });
        };
      };

      //LOGIND E USUARIO LOCAL
      DBLocalLoginDeUsuario.initLogin();

      //VERIFICA CREDENCIAL DE LOGIND

      DBLocalLoginDeUsuario.db.transaction(function(res) {
        var l = "SELECT * FROM LOGINUSUARIO"
        res.executeSql(l, null, function(i, data) {

        });
      });
      if (acao == 'produtos') {
        var getData = function() { //pega dados do banco
          var params = {
            acao: 'produtos',
            counter: $scope.contatos.length,
            //token:"1f3d2gs3f2fg3as2fdg3re2t1we46er45"
          };

          Data.getData(params).success(function(data) {
            $scope.contatos = data;

          }).error(function(data) {
            console.log(data ? data : "Nao foi possivel acessar o servidor!");
          });
        };
      };
      getData();

      $ionicModal.fromTemplateUrl('views/cadastro.html', {
        scope: $scope,
        animation: 'slide-in-up'
      }).then(function(modal) {
        $scope.modal = modal;
      });

      $scope.abreModal = function() {
        $scope.modal.show();
      };

      $scope.fechaModal = function() {
        $scope.modal.hide();
      };



      //CADASTRO DE PRODUTO
      $scope.cadastroUsuario = function(cadastro) {
        Data.setData(cadastro).success(function(data) {
          alert(data);
          $scope.modal.hide();
          getData();
        }).error(function(data) {
          alert(data);
        });

        console.log(cadastro);
      };

      //EXIBE PRODUTO
      $scope.perfilUsuario = function(id) {
        $scope.usuarioPerfil = $scope.contatos.filter(function(element) {
          return element.id == id;
        }); //filtra elemento de arrey e traz elemento notificado.
        console.log($scope.usuarioPerfil);
        $location.path("/menu/perfil");
      };

      //APAGAR DADOS
      $scope.apagar = function(contato) {
        console.log(contato.id);

        //CONFIRMANDO A OPERAÇÃO
        navigator.notification.confirm(
          "Tem certeza que deseja apagar este contato?",
          apagarContato,
          "Atenção", ["Apagar", "Cancelar"]
        );

        function apagarContato(buttonIndex) {
          if (buttonIndex === 1) {
            Data.delData(contato.id).success(function(data) {
              navigator.notification.alert(data ? data : "Nao foi possivel deletar este contato!", null, "Mensagem", "OK");
              getData();
              $ionicScrollDelegate.scrollTop();
            }).error(function(data) {
              navigator.notification.alert("Nao foi possivel deletar este contato, tente novamente!", null, "Mensagem", "OK");
            });
          };
        };

      };
    };
  });
})();

And give me the following mistake

Uncaught Referenceerror: listLeitura is not defined at Htmlelement.onclick(VM5491 Products: 1) at triggerMouseEvent(Ionic.bundle.js: 2811) at tapClick(Ionic.bundle.js: 2800) at Htmldocument.tapTouchEnd(Ionic.bundle.js: 2918)

If js is declared to be running.

Answer 1

There are 3 problems there in your code.

1. You need to place the ng-controller tag somewhere above the DOM hierarchy with the controller you want to use.

For example:

<ion-side-menus ng-controller="initCtrl">

2. The other problem is that there in the controller you need to associate your function to the scope of the controller.

    $scope.listaLeitura = listaLeitura;

    function listaLeitura(acao) {
       // Code...
    }

3. And finally it is good to use the tags that angular or Ionic provide. And inside do the routing for the view you want through $Location.path or $state.go

    <ion-item class="menu" menu-close ng-click="listaLeitura('clientes')">
      <i class="ion-person-stalker"></i> Clientes
    </ion-item>