Cordova Plugins (Camera, Geolocation) won't load

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

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

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.