0

Im new with Angular and have...let´s say a few starter problems. I have made an small app with phonegap, onsen ui and angluarjs using the nfc-plugin. All i want to do is reading a tag-id from a nfc-tag. Everything works fine when i place my whole code within the controller.

This looks like that:

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

        

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

        
        // Get the ID Number from the tag

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

        nfc.addTagDiscoveredListener(
             $scope.onNfc,             // tag successfully scanned --> call $scope.onNfc
             function (status) {    // listener successfully initialized
                $scope.nfcok = "NFC Reader ist ready";
             },
             function (error) {     // listener fails to initialize
                $scope.nfcok = "NFC Reader ist nicht ready";
             }
        );
    });
<ons-page class="center">
    <div ng-controller="Page3Ctrl">
        <ons-text-input ng-model="item" style="margin:10px;"></ons-text-input><br>
        <ons-text-input ng-model="nfcok" style="margin:10px;"></ons-text-input><br>
        <ons-button ng-click="save()">Save</ons-button>
        <ons-button ng-click="onNfc()">Scan NFC</ons-button>
    </div>
</ons-page>

But now want to bring the NFC-Reading part to a separte file called services.js and place it into a factory. A there is my problem how to do this.

I have tried this but unfortunately it doesn't work. Mybe i just need a small tipp or i am on a completly wrong way?????:

myApp.factory('onNfc', function() {
    
    this.getNfc = function(nfcEvent) {
      var tag = nfcEvent.tag;
      var taglesen = nfc.bytesToHexString(tag.id);
      return taglesen;
   }

   nfc.addTagDiscoveredListener(
             this.getNfc(),             // 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";
             }
    );
});

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

        

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

                $scope.$apply(function() {
                $scope.item = onNfc.getNfc();
        });

        

        
    });

I am grateful for any help

Best regards,

Idur
  • 9
  • 6
  • Can you create a jsfiddle, codepen, etc for this? There could be something small that's preventing it from working. e.g. a typo in referencing your app `var myApp = angular.module('typoInHereSomewhere');` – arcade Gandalf Feb 17 '15 at 12:23
  • When the NFC code was within the controller, you have a function that will explicitly call the NFC code (along with the NFC event handler) - However, in your controller *after* moving the NFC code into a service, there is no trigger - You are best left at using `console.log()` statements to identify if your service is called at all. – callmekatootie Feb 17 '15 at 12:33
  • Side Note - Using `scope.$apply()` as shown here should result in lots of console errors - you are advised to proceed using your own custom directive (where you can add the scope.$apply()) – callmekatootie Feb 17 '15 at 12:35

2 Answers2

0

You can try returning a API of sorts from your service that other modules can tap into e.g.

myApp.factory('onNfc', function() {

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

    function getNfc(nfcEvent) {
      var tag = nfcEvent.tag;
      var taglesen = nfc.bytesToHexString(tag.id);
      return taglesen;
    }

    nfc.addTagDiscoveredListener(
         getNfc(),             // 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";
         }
    );
});
arcade Gandalf
  • 175
  • 6
  • And how will i call this factor in my controller? Like this: $scope.testnfc = function() { $scope.value = onNfc.getNfc(); }; – Idur Feb 17 '15 at 18:50
  • I'm not quite sure how you're using it but when I'm making a service I simply reference it as a controller dependency e.g. `app.controller('Page3Ctrl', function($scope, Data, onNfc)` and then you can reference the `onNfc` object from your controller. – arcade Gandalf Feb 17 '15 at 19:46
  • Many thanks to Gandalf !! The procedure you listed above works. I have tested it with another function. In this case i have an additional problem with these two lines. var tag = nfcEvent.tag; var taglesen = nfc.bytesToHexString(tag.id); The nfc.addTagDiscoveredListener works fine and trigger the function getNfc but then i makes nothing. It looks like there is some problem with the "nfcEvent". Will i have to consider something else for this? Read something about $rootScope. – Idur Feb 18 '15 at 07:28
0

Many thanks to Gandalf !! The procedure you listed above works. I have tested it with another function. In this case i have an additional problem with these two lines.

 var tag = nfcEvent.tag;
var taglesen = nfc.bytesToHexString(tag.id);

The nfc.addTagDiscoveredListener works fine and trigger the function getNfc but then i makes nothing. It looks like there is some problem with the "nfcEvent". Will i have to consider something else for this? Read something about $rootScope.

Idur
  • 9
  • 6
  • getNfc takes in a parameter `nfcEvent`. I can't that being passed in anywhere in your code. – arcade Gandalf Feb 18 '15 at 10:17
  • The events is fired when NFC tags are read. This "nfcEvent" ist generate by "nfc.addTagDiscoveredListener" The callback that is called is my getNfc. – Idur Feb 18 '15 at 10:52
  • Can you `console.log` `tag` and `taglesen` to see what is output? – arcade Gandalf Feb 18 '15 at 11:07
  • No it doesnt work. The problem is definitively by the nfcEvent. I believe the nfcEvent is not being send to the getnfc function - whyever. How will i bring the nfc event to the function. When the code was in the controller (code on the top) it works. There is used the $scope but this isnt available in the factory. – Idur Feb 18 '15 at 14:32
  • Can you put your full code on jsfiddle or something? It's hard to debug with code snippets. – arcade Gandalf Feb 18 '15 at 14:47
  • I will try this, but how will you debug this. The Nfc-Options are a phonegap plugin. – Idur Feb 18 '15 at 14:52
  • So when `addTagDiscoveredListener` is called, `getNfc` is not called? – arcade Gandalf Feb 18 '15 at 14:54
  • When addTagDiscoverListener is called then getNfc is called --> this works, but addTagDiscoverListener also creats an NfcEvent and i think this Event dont reach getNfc. – Idur Feb 18 '15 at 14:56
  • Ok, so there is an event `onNfc` that is bound to your `$scope`? You could try adding the handler back in to your controller: `$scope.onNfc = onNfc.getNfc()` – arcade Gandalf Feb 18 '15 at 14:58
  • When i ignore var tag = nfcEvent.tag; and var taglesen = nfc.bytesToHexString(tag.id); and make for example taglesen = 'test'; and return the value then this will work too. Otherwise the both lines var tag = nfcEvent.tag; var taglesen = nfc.bytesToHexString(tag.id); wont work because getNFc doesnt get the nfcEvent from addTagDiscoverListener. – Idur Feb 18 '15 at 15:00
  • Where is the `nfc` object coming from? – arcade Gandalf Feb 18 '15 at 15:02
  • From the nfc plugin cordova: https://github.com/chariotsolutions/phonegap-nfc#events – Idur Feb 18 '15 at 16:48
  • I have found another thread: http://stackoverflow.com/questions/16477123/how-do-i-use-on-in-a-service-in-angular. Mybe this is a answer to my problem. I will try it. – Idur Feb 18 '15 at 18:27