CODEWITHSUNDEEP
javascriptangularjscordovadomonsen-ui
shubhanan
shubhanan

Reputation: 21

onsen ui: access ons-dialog's DOM elements from parent page

I've managed to build a reasonable application in my free time looking at the tutorials but I'm stuck at being able to access (or know if its possible to access) the DOM element in an ons-dialog.

I'm building image upload feature for an image captured from camera. After clicking capture button on a parent page and capturing via the camera (which is working fine until this stage), I want the image to show up in a ons-dialog box where user can put captions, tags, etc before uploading the image.

Here's my code:

On the parent page inside HomepageController where "capture" button is handled:

var uploadImageDialog_var = ""; // global variable in js file outside HomepageController definition
// ...
// access camera, capture pic, go to success function with captured image data:
// ...
function onCaptureSuccess(data) {
    ons.createDialog('upload_image_dialog.html', {parentScope: $scope}).then(function(dialog) {
        uploadImageDialog_var = dialog;
        uploadImageDialog_var.show();
    });
    var viewport = document.getElementById('viewport'); 
    document.getElementById("test_img").src = "data:image/jpeg;base64," + data; <------ THIS LINE
    console.log(document.getElementById('test_img').src);
};

On the html side, "viewport" is a div on the ons-dialog:

<ons-template id="upload_image_dialog.html" var="uploadImageDialog" ng-controller="HomepageController">
    <ons-dialog cancelable><!-- animation-options="{duration: 0.2, delay: 1, timing: 'ease-in'}">-->
        <div class="list__item list__item center" style="opacity: 0.4; border-bottom: 1px solid #0d96d7" > Tag My Upload </div>
        <div id="viewport" class="" style="width: 300px; height:300px">
            <img style="" id="test_img" src="" />   
        </div>
        <br/> <br/><br/> 
        <ons-button class="center" modifier="large"  ng-click="uploadPictureOK()">Upload!</ons-button>
    </ons-dialog>
</ons-template>

document.getElementById("test_img") in above js looks like is working, and the changes to test_img's src are showing up when I console.out it, but the actual dialog is displayed with old dummy image.

Please let me know if I need to explain / provide better, and excuse me if this is trivial.

Upvotes: 1

Views: 385

Answers (1)

shubhanan
shubhanan

Reputation: 21

I figured it out. I accidentally had a ng-controller definition on both the parent page's and the template when the two were declared separately. That was leading to different accesses to $scope/other variables. I clubbed them up and it is working like a charm. :-)

Upvotes: 1

Related Questions