How to click after my function read a barcode?

Question

I'm trying to click in a search button after my app reads a barcode, but so far it's without success.

My search button is $scope.buscar

How do I do this after $('#txtCode').val(imageData.text); ?

BarCode Ctrl

.controller("BarCode", function( $scope, $cordovaBarcodeScanner){
   $scope.scanBarcode = function(){    
         $cordovaBarcodeScanner.scan().then(function(imageData){
           $('#txtCode').val(imageData.text);

            }, function(error){
              console.log('Deu Merda'+error);
          });
    }
})

People & Corpo Ctrl

.controller('PeopleCtrl',function($scope, $http) {
    $scope.people = [];

    angular.element(document).ready(function() {
        var httpRequest = $http({
            method: 'GET',
            url: 'json/clientes.json',
        }).success(function(data, status) {
            $scope.people = data;
        });

     });

})

.controller('CtrlCorpo',function($scope, $http) {
        $scope.people = [];

    angular.element(document).ready(function() {
        var httpRequest = $http({
            method: 'GET',
            url: 'json/clientes.json',
        }).success(function(data, status) {
            $scope.people = data;
        });

     });

Search Button

        $scope.buscar = function (){
            angular.forEach($scope.people, function(c, i) {
                var item = "<td><a href=cardapio.html?"+c.id+">"+ c.id + "</a></td>" + "<td>"+ c.name +"</td>"
                if(c.id == $('#txtCode').val()){
                    $('#tabelaPessoa').html(''),
                    $('#tabelaPessoa').append(item);
                }
            }
        );

        }
});

I have to search in JSON all clients and Start my APP showing.

When I click in my BarCodeScanner button, I'll read the ID and automatically I've to search and if exists. Automatically enter in the second page 'cardapio.html?clientid'. For now I'm trying to search after reading the barcode.

Answer 1

Your problem is that you are attempting to access a scope outside your controller.

My button is under the control of CtrlCorpo which in turn is under the control Barcode.

In Angular a Parent controller can't modify the data of a Child controller. But a child controller does have access, and can modify the parent's scope variable via the use of $scope.$parent.varName . There is a great article on this Here .

You are attempting to access a scope variable inside the outer controller. Look at the example I put together which replicates the problem you are encountering.

 var app = angular.module("MyApp", []); app.controller("OuterCtrl", function($scope){ $scope.myOuterCtrlVariable = "OuterCtrl"; }); app.controller("InnerCtrlOne", function($scope){ $scope.ok = function(data){ $scope.myOuterCtrlVariable = data; }; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="MyApp"> <div ng-controller="OuterCtrl"> OUTSIDE: {{myOuterCtrlVariable}} <div ng-controller="InnerCtrlOne"> INSIDE: {{myOuterCtrlVariable}} <button ng-click="ok('From Inner Ctrl')">OK</button> </div> </div> </div> 

To fix this, You can $broadcast an event when your textfield takes in the amount of data your need in order to process it. The event will propagate down the $scope and hit the ChildCtrl where the Button lives; then you can execute the Button with the data passed down to it from above (above being the parent controller).

Its good to note here that using $broadcast dispatches an event name downwards to all child scopes while using $emit will make it go upwards.

Read here for more information on $emit vs $broadcast .

Take a look at this example on how to accomplish this with $broadcast .

function firstCtrl($scope)
{
    $scope.$broadcast('someEvent', [1,2,3]);
}

function secondCtrl($scope)
{
    $scope.$on('someEvent', function(event, mass) { console.log(mass); });
}