javascript - 温泉用户界面 : access ons-dialog's DOM elements from parent page

Question

我已经成功地在空闲时间查看教程构建了一个合理的应用程序，但我一直坚持能够访问(或知道是否可以访问)ons-dialog 中的 DOM 元素。

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

这是我的代码:

在处理“捕获”按钮的 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 方面，“viewport”是 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/其他变量的不同访问。我把它们组合在一起，效果非常好。 :-)