Load another view with a picture after taking the picture using ngCordova camera and Ionic

Question

I'm playing around with ionic framework and I'm trying to load another view after take the picture.

I have the following controller:

.controller('SnapCtrl', function($scope, $cordovaCamera) {     
  $ionicPlatform.ready(function(){
    var options = { 
      quality : 75, 
      destinationType : Camera.DestinationType.DATA_URL, 
      sourceType : Camera.PictureSourceType.CAMERA, 
      allowEdit : false,
      encodingType: Camera.EncodingType.JPEG,
      targetWidth: 400,
      targetHeight: 400,
      popoverOptions: CameraPopoverOptions,
      saveToPhotoAlbum: false
    };

    $cordovaCamera.getPicture(options).then(function(imageData) {
      $scope.imgURI = "data:image/jpeg;base64," + imageData;      
    }, function(err) {
    // An error occured. Show a message to the user
    }); 
  })  
})

And this is the code of my pages:

config(function($stateProvider, $urlRouterProvider) {

  // Ionic uses AngularUI Router which uses the concept of states
  // Learn more here: https://github.com/angular-ui/ui-router
  // Set up the various states which the app can be in.
  // Each state's controller can be found in controllers.js
  $stateProvider

  // setup an abstract state for the tabs directive
    .state('tab', {
    url: '/tab',
    abstract: true,
    templateUrl: 'templates/tabs.html'
  })

  // Each tab has its own nav history stack:

  .state('tab.export', {
    url: '/export',
    views: {
      'tab-dash': {
        templateUrl: 'templates/tab-dash.html',
        controller: 'DashCtrl'
      }
    }
  })

  .state('tab.users', {
      url: '/users',
      views: {
        'tab-chats': {
          templateUrl: 'templates/tab-chats.html',
          controller: 'ChatsCtrl'
        }
      }
    })

  .state('tab.snapshot', {
    url: '/snapshot',
    views: {
      'tab-chats': {
        templateUrl: 'templates/tab-snapshot.html',
        controller: 'SnapCtrl'
      }
    }
  })

  /*  .state('tab.chat-detail', {
      url: '/chats/:chatId',
      views: {
        'tab-chats': {
          templateUrl: 'templates/chat-detail.html',
          controller: 'ChatDetailCtrl'
        }
      }
    })*/

  .state('tab.settings', {
    url: '/settings',
    views: {
      'tab-account': {
        templateUrl: 'templates/tab-account.html',
        controller: 'AccountCtrl'
      }
    }
  });

The code above opens the camera automatically when the user access to the snapshot page. I want, for example, after taking the picture (the functions are into "snapshot" page and controller) load another page eg "settings" and display the picture taken on that page.

I was reading something about the statement $state.go('app.home') but it's not working for me or maybe I'm using it in a wrong way, what can I do to achieve what I'm looking for, in few words: Take a picture and load a page with the picture taken.

Regards.

Answer 1

You can use $state.go('tab.settings') to redirect to that view.

You should be able to pass the image to this call like:

$cordovaCamera.getPicture(options).then(function(imageData) {
      $scope.imgURI = "data:image/jpeg;base64," + imageData;   
      $state.go('tab.settings', {image: $scope.imgURI});
    },

Here's another answer with additional details: https://stackoverflow.com/a/30511670/643779