Cordova Plugins (Camera, Geolocation) won't load


#1

I am having a lot of trouble trying to get Cordova plugins to load within my ionic app. I am using the device to test, have added the plugin, installed ngCordova, and still whenever I click the button to fire the function nothing happens. The controller loads fine, but the rootscope is not binding to the function because Camera is not defined (I think). When I see $scope.message it never evaluates to “Now I’m here” but does evaluate to “here”. Please help.

Controller:

angular.module('module')

  .controller('PostController', function($scope, $rootScope, Factory, $cordovaCamera, $cordovaGeolocation, $ionicPlatform) {

    document.addEventListener("deviceready", function() {
      console.log('here');
      $scope.message = "here";
      var options = {
        quality: 100,
        destinationType: Camera.DestinationType.DATA_URL,
        sourceType: Camera.PictureSourceType.CAMERA,
        allowEdit: false,
        encodingType: Camera.EncodingType.JPEG,
        targetWidth: 300,
        targetHeight: 300,
        popoverOptions: CameraPopoverOptions,
        saveToPhotoAlbum: false
      };
      $scope.message = "Now I'm here";
      $scope.postPicture = function() {
        console.log('posting picture');
        $scope.Camera = "Posting Picture";

        var posOptions = {timeout: 10000, enableHighAccuracy: true};
        $cordovaGeolocation
          .getCurrentPosition(posOptions)
          .then(function (position) {
            console.log('got geo location: ' + position.coords);
            $scope.Camera = 'got geo location: ' + JSON.stringify(position.coords);
            var lat  = position.coords.latitude;
            var long = position.coords.longitude;

            $cordovaCamera
            .getPicture(qualityOptions)
            .then(function(imageData) {
              console.log('got image');
              var resp = Factory.postImage($rootScope.userID, imageData);

              // create patron and check for error
              if (resp.success === false) {
                $rootScope.$broadcast('event:error-creating-image', resp.distance);
              }

            }, function(err) {
              console.log('Error taking picture: ' + err);
              $rootScope.$broadcast('event:error-take-picture');
            });

          }, function(err) {
            console.log('Error getting geolocation: ' + err);
            $rootScope.$broadcast('event:error-no-geolocation');
          });
        }
    }, false);

  });

In my html file I am calling the postPicture() function with an ng-click:

  <button class="button button-full button-assertive" style="display:block;position:absolute:top:50%;margin: 0 auto;" ng-click="postPicture()">
    <i class="icon ion-ios-camera"></i>
  </button>

ngCordova is imported before the cordova script:

    <!-- cordova script (this will be a 404 during development) -->
    <script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
    <script src="cordova.js"></script>

and I am declaring the module with ngCordova:

angular.module('module', ['module.services', 'angularPayments', 'ngCordova'])

In my config.xml I’m including the plugin too:

    <!-- Core plugins -->
    <gap:plugin name="org.apache.cordova.camera" />
    <gap:plugin name="org.apache.cordova.console" />
    <gap:plugin name="org.apache.cordova.device" />
    <gap:plugin name="org.apache.cordova.geolocation" />
    <gap:plugin name="org.apache.cordova.splashscreen" />

What am I doing wrong? I’ve spent three days trying to solve this to no avail…

Thanks


#2

hi cdipaolo

I had try your code and find following in console.

It is working but there is some error with in code. i am putting your controller code in which i had make 2 to 3 changes

App.controller('indexController', function($scope,$rootScope,$cordovaCamera,$cordovaGeolocation) {
      document.addEventListener("deviceready", function() {
          console.log('here');
          $scope.message = "here";
          var options = {
            quality: 100,
            destinationType: Camera.DestinationType.DATA_URL,
            sourceType: Camera.PictureSourceType.CAMERA,
            allowEdit: false,
            encodingType: Camera.EncodingType.JPEG,
            targetWidth: 300,
            targetHeight: 300,
            popoverOptions: CameraPopoverOptions,
            saveToPhotoAlbum: false
          };
          $scope.message = "Now I'm here";
          $scope.postPicture = function() {
            console.log('posting picture');
            $scope.Camera = "Posting Picture";
    
            var posOptions = {enableHighAccuracy: true};
            $cordovaGeolocation
              .getCurrentPosition(posOptions)
              .then(function (position) {
                console.log('got geo location: ' + position.coords);
                $scope.Camera = 'got geo location: ' + JSON.stringify(position.coords);
                var lat  = position.coords.latitude;
                var long = position.coords.longitude;
    
                $cordovaCamera
                .getPicture(options)
                .then(function(imageData) {
                  console.log('got image');
                  var resp = Factory.postImage($rootScope.userID, imageData);
    
                  // create patron and check for error
                  if (resp.success === false) {
                    $rootScope.$broadcast('event:error-creating-image', resp.distance);
                  }
    
                }, function(err) {
                  console.log('Error taking picture: ' + err);
                  $rootScope.$broadcast('event:error-take-picture');
                });
    
              }, function(err) {
                console.log('Error getting geolocation: ' + err);
                $rootScope.$broadcast('event:error-no-geolocation');
              });
            }
        }, false);
    });

i still getting error then please tell what specific error you were getting


#3

Just deleted my reply after reading your post more closely. Maybe try using the full version of ngCordova instead of the min version. Just a thought. I was also struggling with ngCordova stuff recently. Also try adding the plugins with node package manager then verify they are in your root/plugins folder.