X

Geertjan's Blog

  • October 9, 2015

AngularJS Cordova Camera Application

Geertjan Wielenga
Product Manager

I'm working on a YouTube clip about Cloud Testing Services... and here's the code that will be used, indeed, in an Angular application:

.controller('View1Ctrl', function($scope) {
$scope.myPictures = [];
$scope.$watch('myPicture', function(value) {
if (value) {
$scope.myPictures.push(value);
}
}, true);
})
.directive('camera', function() {
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, elm, attrs, ctrl) {
elm.on('click', function() {
navigator.camera.getPicture(
function(imageURI) {
scope.$apply(function() {
ctrl.$setViewValue(imageURI);
});
},
function(err) {
ctrl.$setValidity('error', false);
}, {quality: 50,
destinationType: Camera.DestinationType.FILE_URI});
});
}
};
})

And here's the HTML:

<button camera ng-model='myPicture'>Take Picture</button>
<ul ng-repeat="onepic in myPictures">
<li style="list-style: none">
<input type="image"
src="{{onepic}}"
width="250"
height="250"
alt="error"/>
</li>
</ul>

Careful readers of this blog will be familiar with the above code from this earlier blog.

Be the first to comment

Comments ( 0 )
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.