How to handle callback in services of AngularJS

Question

I´m using a Phonegap-Plugin to read the ID of NFC-Tags and want to use this inside of a .factory

So what it makes:

Inside my .factory I call the command "nfc.addTagDiscoveredListener" which register an event listener for NFC-Tags. On success he calls the function holeNfc and should fires an nfcevent.

In fact my function holeNfc is called but the nfcEvent will not arrive. In further consequence the line --> tag = nfcEvent.tag; wont work because he doesnt get the nfcEvent.

Code:

app.factory('leseNfc', function($rootScope) {

        // Items exposed to other modules
        
        return {
           initNfc: initNfc
        };

        
      
       function initNfc() {
            var tag = '';
            var taglesen = '';

            function holeNfc(nfcEvent) {
                tag = nfcEvent.tag;
                taglesen = nfc.bytesToHexString(tag.id);
            }

            nfc.addTagDiscoveredListener(
                 holeNfc(),             // tag successfully scanned
                 function (status) {    // listener successfully initialized
                    msg = "NFC Reader ist ready";
                    //return msg;
                 },
                 function (error) {     // listener fails to initialize
                    msg = "NFC Reader ist nicht ready";
                    //return msg;
                 }
            );

            return taglesen;
        }
    });

I also tried the same inside my controller and there it works without problems:

app.controller('Page3Ctrl', function($scope, $rootScope, Data, leseNfc, Calc) {
        $scope.item = Data.selectedItem.title;

        

        $scope.save = function() {
            Data.selectedItem.title = $scope.item;
            $scope.ons.navigator.popPage();
        };

        $scope.readNfc = function(nfcEvent) {
            
            var tag = nfcEvent.tag;
            var taglesen = nfc.bytesToHexString(tag.id);
            $scope.$apply(function() {
                $scope.nfcvalue = taglesen;
            });
        };

        nfc.addTagDiscoveredListener(
             $scope.onNfc,             // tag successfully scanned
             function (status) {    // listener successfully initialized
                $scope.nfcok = "NFC Reader ist ready";
             },
             function (error) {     // listener fails to initialize
                $scope.nfcok = "NFC Reader ist nicht ready";
             }
        );
    });

My Controller:

app.controller('NFCCtrl', function($scope, $rootScope, Data, Calc, onNfc, leseNfc) {
        $scope.item = Data.selectedItem.title;

        

        $scope.save = function() {
            Data.selectedItem.title = $scope.item;
            $scope.ons.navigator.popPage();
        };

                   
        $scope.readnfc = function() {
            $scope.nfcvalue = leseNfc.initNfc();
        };

    });

<ons-page class="center">
    <div ng-controller="NFCCtrl">
        <ons-text-input ng-model="item" style="margin:10px;"></ons-text-input><br>
        <ons-text-input ng-model="nfcvalue" style="margin:10px;"></ons-text-input><br>
        <ons-button ng-click="save()">Save</ons-button>
        <ons-button ng-click="readnfc()">Nfc</ons-button>
    </div>
</ons-page>

digao_mb · Accepted Answer · 2015-02-22 04:33:35Z

1

It seems that you are calling your function on your first snippet. And in fact you should just pass it as parameter.

Just make the change from holeNfc() to holeNfc

 nfc.addTagDiscoveredListener(
             holeNfc,             // tag successfully scanned
             function (status) {    // listener successfully initialized
                msg = "NFC Reader ist ready";
                //return msg;
             },
             function (error) {     // listener fails to initialize
                msg = "NFC Reader ist nicht ready";
                //return msg;
             }
        );

EDIT Changing factory Something like this would be better.

app.factory('leseNfc', function($rootScope) {

    // Items exposed to other modules

    return {
       initNfc: initNfc
    };



   function initNfc(callback) {


        function holeNfc(nfcEvent) {
            var tag = nfcEvent.tag;
            var taglesen = nfc.bytesToHexString(tag.id);
            callback(taglesen);


        }

        nfc.addTagDiscoveredListener(
             holeNfc,             // tag successfully scanned
             function (status) {    // listener successfully initialized
                msg = "NFC Reader ist ready";
                //return msg;
             },
             function (error) {     // listener fails to initialize
                msg = "NFC Reader ist nicht ready";
                //return msg;
             }
        );

    }
});

And in your controller you could do something similar to what you did before on read value:

initNfc(function(taglesen){
     $scope.$apply(function() {
            $scope.nfcvalue = taglesen;
        });
);

The difference is this plugin seems to keep calling your code after you register with it, so you should really just call initNfc once, as it can even keep calling your code 2 or 3 times every time it reads something.

edited Feb 22, 2015 at 4:33

answered Feb 19, 2015 at 18:01

digao_mb

1,29416 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Idur Over a year ago

May be you can help me once again :)...One problem left. When i call the version in my controller i only have to push my button once and read one tag after the other, but when i put it in my factory i have to press the button all the time to read the nfc tags. I have updated my code above.

digao_mb Over a year ago

I think I understand... it seems that it would be better to change the service to receive a callback, which it would call everytime it receives an nfc event. Made an edit

Idur Over a year ago

Thanks but unfortunately it doesnt work. Read something about rootScope. Maybe this is the answer????

Collectives™ on Stack Overflow

How to handle callback in services of AngularJS

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related