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

Question

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

我正在为从相机捕获的图像构建图像上传功能。单击 parent 页面上的捕获按钮并通过相机捕获（在此阶段之前工作正常）后，我希望图像显示在 ons-dialog 框中，用户可以在其中放置标题、标签、上传图片之前等。

这是我的代码：

在处理 "capture" 按钮的 HomepageController 内的 parent 页面上：

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/other 变量的不同访问。我把它们组合起来，效果很好。 :-)

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

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

javascript

dom

angularjs

cordova

onsen-ui