Updating DOM element in function fail

ionic-v1
1

Hi.

I have a mega simple app using a bar code scanner, after trying the Cordova one I decided to look at the Scandit SDK - the scanner works fine but I have having such a weird time updating on simple part of the DOM with code that worked perfectly with the Cordova scanner.

I have placed the code below in case anyone can see an obvious gotcha, the only grain of hope I can find is that I tried using $scope.apply() to force an update which provides a eval error suggesting that the $scope var is not in the scope of the funtion - but for the life of me I cant see how not.

Snippet from the template html:

<div class="item item-text-wrap">
    <span ng-bind-html="scan_result">No data, please scan a ticket</span>
  </div>

Then in the controller:

.controller('scanBarCode', function($scope, $state) {

    //sets the html span text
    $scope.scan_result = "No data, please scan a ticket";
    
    //set up a var for the scanned
    var scanned;
  
  function success(resultArray) {
        
        scanned = resultArray[0];
          scanned = JSON.parse(scanned);
          
          var scantext = "<strong>Booking Ref : "+scanned.id+"</strong><br/>";
          scantext += "Adults : "+scanned.adults+"<br>";
          scantext += "Children : "+scanned.child+"<br>"; 
          scantext += "Concessions : "+scanned.cons+"<br>"; 
          scantext += "Family Ticket : "+scanned.family+"<br>"; 
          
          //console.log(scantext);
          $scope.scan_result = scantext;
  };

  function failure(error) {
      alert("Failed: " + error);
  };
    
  $scope.scanBarcode = function() {
        // See below for all available options.
        cordova.exec(success, failure, "ScanditSDK", "scan",
                     ["appKeywasinHere",
                      {"beep": true,
                      "1DScanning" : false,
                      "2DScanning" : true}]);
  };
     
})

The very odd thing is that the console.log command shows the scanned text perfectly in the console - yet the following line will not update the DOM. I have tried sending the scanned text to a function in the same controller but somehow it simply loses the ability to communicate with the template.

I’ve tried the $scope.$watch() but that ran once and then did not run again - its almost like the text is being run in a completely seperate instance - any ideas please?

Oh I should add - when the scan button which kicks this off is clicked again, the text then appears in the span - so it is being stored (I think) just not displayed until Angular comes around agin, or at least thats what I think - probably a curved ball.
Thanks in advance!

2

Did you already try ng-bind only?

https://docs.angularjs.org/api/ng/directive/ngBind

instead of ng-bind-html.

4

Yes, the reason for using the ng-bind-html was that the string I’m sending to the view/template has html elements.

What I find really odd is that using the ngCordova scan implementation this code worked perfectly, I am still coming back to the scope being incorrect in the success function - I’ve tried all manner of workarounds such as adding $scope as a parameter to the function etc but no joy.

Reading up on Angular suggests that the success function is outside of the normal Angular clean up routines and so $scope.apply() should have fixed it, instead I get an undefined error wen implementing that into the function which suggests to me that scope is indeed the issue.

Still trying to figure it out - such pain for such a small thing :smile:

5

So after another couple hours I figured the issue was definitely scope.

I wrapped up the $scope into a global var in the controller and used that to do the trick with a scope.$apply() afterwards.

Sorted.