Ng-repeat not updating after picture taken with camera

cordova
1

Hey guys, thanks for taking a look at this post.

So essentially the problem I’m having is that when I press a button, I launch the camera app and have a user take a picture that is then also saved to the camera roll. After the user takes the image, I have a ng-repeat(ed) div that should show you the picture and allow you to remove it if you do not like it.

Now, this does work. But only if you change views and come back to the previous view otherwise the image does not show up. Hopefully that makes sense. I will post the relevant code down below.

So I have a view that has:

<button class="button icon-left ion-camera button-block button-positive" ng-click="vm.takePicture()" ng-disabled="vm.images.locations.length == 2">{{ 'start.agronomicInformation.picture' | translate }}</button>

<p ng-show="vm.images.locations.length > 0">Tap on the image to remove it. Max 2 images.</p>
	<div class="picContainer" ng-repeat="img in vm.images.locations" ng-click="vm.removeImage('{{img}}')">
		<div class="picture">
			<img ng-src="{{img}}" alt="Image preview could not be loaded">
			<div class="darken"><i class="icon ion-close-round"></i></div>
		</div>
	</div>

and then a controller with:

vm = this;

//this is just an object with a few properties. The most important being a 'locations' array where i store the source of the image
vm.images = info.agronomicInformation.pictures;

vm.takePicture = function() {
	document.addEventListener("deviceready", function () {

  navigator.camera.getPicture(function(imageURI) {
			info.agronomicInformation.pictures.locations.push(imageURI);
  }, function(message){
    alert('Failed because: ' + message);
  }, { quality: 50,
    destinationType: Camera.DestinationType.FILE_URI,
		 	saveToPhotoAlbum: true});
}, false);
}

Thanks for taking the time to look over this. If more information is needed I can provide it.

2

Do you have

vm.images = info.agronomicInformation.pictures;

bound to $scope ?

3

Nope, have not been using scope.

I’ve been following https://github.com/johnpapa/angular-styleguide , which recommends using “vm” syntax.

4

Gotcha. Well somewhere that needs to be bound to $scope or it won’t update in the UI. Put your entire controller code up here and I could help you out better (hopefully) :smile:

5

That’s honestly the only relevant part of it! Other than what you see with:

vm.images = info.agronomicInformation.pictures;

Where “info” is a factory that holds the json object “agronomicInformation” which just looks like this:

agronomicInformation = {
	crop: '',
	variety: '',
	growthStage: '',
	height: '',
	soilConditions: '',
	cropResidue: '',
	pest: '',
	pictures: {
		tags: [],
		locations: []
	}
};
6

Just paste your controller, remove any private info and replace with dummy text if that’s a concern. Without seeing the .controller I can’t pinpoint the issue but it seems like a simple data-binding issue. Also what’s the html look like for the vm.images? Do you have them in ng-repeat such as:

ng-repeat=“img in vm.images”

?

7

Apologies, I completely overlooked your view code in the post.

8

No worries.

function AgronomicInformationController(info, $cordovaCamera) {

vm = this;

vm.images = info.agronomicInformation.pictures;

vm.takePicture = function() {
	document.addEventListener("deviceready", function () {

  navigator.camera.getPicture(function(imageURI) {
			info.agronomicInformation.pictures.locations.push(imageURI);
  }, function(message){
    alert('Failed because: ' + message);
  }, { quality: 50,
    destinationType: Camera.DestinationType.FILE_URI,
		 	saveToPhotoAlbum: true});
}, false);
}

}

9

Okay, well I’m not too familiar with the “vm” syntax method, somewhere you have to have something bound to $scope. What is “info” in your dependencies? Is that a service/factory you are using?

I wish I knew the “vm” approach well enough but I’m about out of ideas without actually seeing more of the app architecture to help solve it. I know it’s going to be something silly when you figure it out though :smile: