Binding data shown only after page navigation

ionic-v1
#1

I have the below code in my view. I am displaying the selected image in the IMG tag.

The logic works fine. But I am facing a problem where after the binding is done, the image does not show up immediately. When I navigate to some other page and come back to the actual page, the image shows up.

Ideally the image should be shown as soon as I select the image from the gallery.

        <div class="list card" ng-hide="imageUrl == null">
            <div class="item">
                <h2>Preview</h2>
            </div>
            <div class="item item-body">
                <img id="imgDiv" class="full-image" alt="Selected Image" src="{{imageUrl}}" />
            </div>
        </div>

Below is the controller logic.

$scope.takeCamera = function() {

    navigator.camera.getPicture(fromGallery, null, {
        quality: 50,
        destinationType: navigator.camera.DestinationType.DATA_URL,
        allowEdit: true
    });
}

fromGallery = function(imagedata) {
    $scope.imageData = imagedata;

    if (imagedata !== "") {
        $scope.imageUrl = "data:image/jpeg;base64," + imagedata;
    } else {
        alert("No Valid Image");
    }
}

There are several others pages where I have this issue. Any help would be really appreciated.

Thanks in advance.

#2

if you try to handle events from cordova or other plugins -> that are mostly native -> angular will not recognize scope changes! until the next digest cycle is called.

try to but scope changes in a $timeout

fromGallery = function(imagedata) {
    $timeout(function () {
        $scope.imageData = imagedata;

        if (imagedata !== "") {
            $scope.imageUrl = "data:image/jpeg;base64," + imagedata;
        } else {
            alert("No Valid Image");
        }
    });
}
#3

Another option instead of timeout is to us promise

    navigator.camera.getPicture( {
    quality: 50,
    destinationType: navigator.camera.DestinationType.DATA_URL,
    allowEdit: true
}).then(fromGallery);;

Also try checking out ngCordova, it’ll handle a lot of this stuff for you.

http://ngcordova.com/docs/plugins/camera/

Dale

#4

I would also recommend using ng-src rather than src in you img element

#5

Using ngCordova solved my problem. Thanks for pointing me to this library.

It looks great.

Thanks again.

#6

Thanks for response. I had some problem using it. But finally solved it.