Javascript onsen用户界面：访问ons对话框'；从父页面删除DOM元素

我在闲暇时间阅读教程时，已经成功地构建了一个合理的应用程序，但我一直无法在ons对话框中访问（或者知道是否有可能访问）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);
};

var uploadImageDialog_var=”“；//js文件中HomepageController定义之外的全局变量
// ...
//访问摄像头，拍摄pic，使用拍摄的图像数据进入成功功能：
// ...
函数onCaptureSucture（数据）{
ons.createDialog（'upload\u image\u dialog.html'，{parentScope:$scope}）。然后（函数（dialog）{
上传ImageDialog_var=dialog；
上传ImageDialog_var.show（）；
});
var viewport=document.getElementById（'viewport'）；
document.getElementById（“test_img”）.src=“data:image/jpeg；base64，”+data；
标记我的上传




上传！

上面js中的document.getElementById（“test_img”）看起来正在工作，当I console.out时，对test_img的src的更改显示出来，但实际的对话框显示为旧的虚拟图像

---

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

我找到了答案。当父页面和模板分别声明时，我意外地在父页面和模板上都有ng控制器定义。这导致了对$scope/其他变量的不同访问。我将它们组合在一起，它正在工作很有魅力。：-

我看了看代码笔，不知道我做错了什么..或者我还应该做什么。更多信息：按下页面上的按钮后会弹出此对话框，因此我假设DOM在此之前已完全初始化，我不需要在ons.ready中写入ons.createDialog。模板位于同一html f中将ile作为父页面。

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