onsen ui：从父页面访问ons-dialog的DOM元素

Question

我在空闲时间看了看教程就设法构建了一个合理的应用程序，但是我一直无法访问（或知道是否可以访问）ons-dialog中的DOM元素。

我正在为从相机捕获的图像构建图像上传功能。 在单击父页面上的“捕获”按钮并通过摄像头捕获（在此阶段之前可以正常工作）之后，我希望图像显示在“对话”对话框中，用户可以在其中添加标题，标签等，然后上传图像。

这是我的代码：

在HomepageController内处理“捕获”按钮的父页面上：

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);
};

在html方面，“视口”是ons-dialog上的div：

<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>

上面的js中的document.getElementById（“ test_img”）似乎正在运行，当我进行console.out操作时，对test_img的src的更改会显示出来，但是实际的对话框会显示旧的虚拟图像。

请让我知道是否需要解释/提供更好的信息，如果这很琐碎，请原谅。

Answer 1

我想到了。 当分别声明父页面和模板时，我不小心在其父页面和模板上都有一个ng-controller定义。 这导致对$ scope /其他变量的不同访问。 我将它们组合在一起，并且像魅力一样运转。 :-)