it's my first app with ionic
i'm trying to take a photo in camera tab and retrieve this photo in the filters tab, but I cant, here is the code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="js/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-balanced">
<h1 class="title vcrfont">DSTRY_CAM</h1>
</ion-header-bar>
<ion-tabs class="tabs-balanced tabs-icon-top">
<ion-tab title="WTF?" icon-on="ion-ios-help" icon-off="ion-ios-help-outline">
<ion-pane>
<div id="welcome">
<h2>WELCOME TO<br>DSTRY_CAM</h2>
<h3>INSTRUCTIONS:</h3>
<h3>1.SHOOT</h3>
<h3>2.DESTROY</h3>
<h3>3.SHARE</h3>
</div>
</ion-pane>
</ion-tab>
<ion-tab title="Camera" icon-on="ion-ios-camera" icon-off="ion-ios-camera-outline">
<ion-pane ng-controller="ExampleController" class="centrar">
<img ng-show="imgURI !== undefined" ng-src="{{imgURI}}">
<img ng-show="imgURI === undefined" ng-src="http://placehold.it/300x300">
<button class="button" ng-click="takePicture()">Take Picture</button>
</ion-pane>
</ion-tab>
<ion-tab title="Filters" icon-on="ion-ios-flask" icon-off="ion-ios-flask-outline">
<ion-pane ng-controller="ExampleController">
<img ng-show="imgURI !== undefined" ng-src="{{imgURI}}">
<img ng-show="imgURI === undefined" ng-src="http://placehold.it/300x300">
</ion-pane>
</ion-tab>
<ion-tab title="Share" icon-on="ion-ios-upload" icon-off="ion-ios-upload-outline">
<ion-pane>
<button class="button button-light shurmargen">
heheh
</button>
</ion-pane>
</ion-tab>
</ion-tabs>
</ion-pane>
and the .js
.controller("ExampleController", function($scope, $cordovaCamera) {
$scope.takePicture = function() {
var options = {
quality : 75,
destinationType : Camera.DestinationType.DATA_URL,
sourceType : Camera.PictureSourceType.CAMERA,
allowEdit : true,
encodingType: Camera.EncodingType.JPEG,
targetWidth: 300,
targetHeight: 300,
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
});
}
});
the camera works well, but the photo only shows in camera tab, and i need to show it in filters and share tabs too
thanks!
you have to use $scope.apply to apply the changes in your $scope variable.