使用ngCordova相机和Ionic拍摄照片后,使用照片加载另一个视图

时间:2016-01-14 20:50:09

标签: ios angularjs cordova ionic-framework ionic

我正在玩离子框架,我试图在拍照后加载另一个视图。

我有以下控制器:

.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
    }); 
  })  
})

这是我的网页代码:

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'
      }
    }
  });

当用户访问快照页面时,上面的代码会自动打开相机。我想,例如,在拍摄照片后(功能进入"快照"页面和控制器)加载另一个页面,例如"设置"并显示该页面上拍摄的照片。

我正在阅读有关$state.go('app.home')声明的内容,但它不适合我,或者我可能以错误的方式使用它,我该怎样做才能实现我的目标。{I}用几句话来寻找:拍照并加载带有照片的页面。

问候。

1 个答案:

答案 0 :(得分:0)

您可以使用$state.go('tab.settings')重定向到该视图。

您应该能够将图像传递给此调用,如:

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

以下是另一个答案以及其他详细信息: https://stackoverflow.com/a/30511670/643779