从 AngularUI 引导模式弹出窗口访问控制器方法答案

【问题标题】：Access controller method from AngularUI bootstrap modal popup从 AngularUI 引导模式弹出窗口访问控制器方法
【发布时间】：2013-12-13 19:21:54
【问题描述】：

我正在使用 AngularUI 引导模式弹出窗口。我正在使用“iframe”将一个 aspx 文件加载到弹出窗口中。这是我的弹出模板的代码：

<script type="text/ng-template" id="uploadPopup">
    <div class="modal-header text-center">
        <h4>Upload file</h4>
    </div>
    <div class="modal-body">
       <div id='uploadProcessIndicator' class='statusInd nwAbsPos' ></div>
       <iFrame scroll="" frameborder=0 ng-src="Upload.aspx" class='uploadIFrame'>
       </iFrame>
    </div>
</script>

我的控制器范围中有一个方法“chkAttachmentExtension(fileName)”，我试图在 aspx 文件中调用它。这是aspx文件的代码：

<head runat="server">
<title></title>
<script src="js/ext/jquery.js" type="text/javascript"></script>

<script language="javascript" type="text/javascript">
    function enable() {
        if (document.getElementById('AuthenticateMsg').checked == true) {
            var filepath = $("#SelectFile").val();
            var result = chkAttachmentExtension(filepath);
            if (result == true) {
                document.getElementById('btnUploadFile').disabled = false;
                $(".fileUploadButton").addClass('button1');
            }
            else if (filepath == "") {
                document.getElementById('AuthenticateMsg').checked = false;
                document.getElementById('UploadMessage').innerText = 
                                            "You have not uploaded any file.";
                $("#UploadMessage").addClass('messageColor');
            }
            else {
                document.getElementById('AuthenticateMsg').checked = false;
                document.getElementById('UploadMessage').innerText = 
                           "File format not supported.The supported files 
                            are: doc,docx,gif,htm,html,jpeg,jpg,mhtml,mpp
                            ,msg,pdf,png,ppt,pptx,psd,sql,txt
                            ,vsd,xls,xlsx,xml,zip.";
                $("#UploadMessage").addClass('messageColor');
            }
        }
        else if (document.getElementById('AuthenticateMsg').checked == false) {
            document.getElementById('btnUploadFile').disabled = true;
            $(".fileUploadButton").removeClass('button1');
        }

    }
    function clearText() {
        if (document.getElementById('UploadMessage').innerText.length > 0) {
            document.getElementById('UploadMessage').innerText = "";
            document.getElementById('btnUploadFile').disabled = true;
            $(".fileUploadButton").removeClass('button1');
            document.getElementById('AuthenticateMsg').checked = false;
        }
        else {
            document.getElementById('btnUploadFile').disabled = true;
            $(".fileUploadButton").removeClass('button1');
            document.getElementById('AuthenticateMsg').checked = false;
        }

    }
    function showLoadingMssg() {
        document.getElementById('UploadMessage').innerText = "Uploading...";
        $("#UploadMessage").addClass('messageColor');
        document.getElementById('btnHiddenUploadFile').click();
    }


    // ]]>
</script>

我无法访问此方法并收到错误“chkAttachmentExtension is undefined”。我尝试在 aspx 文件中包含 controller.js，但它再次引发错误，因为我认为它已经包含在我的主页 html 文件中一次。

我该如何解决这个问题？

更新： iframe 父级的内容：

图片链接： http://uditnarayan.net/wp-content/uploads/2013/12/iframeParent.jpg

【问题讨论】：

标签： angularjs angularjs-scope angular-ui-bootstrap

【解决方案1】：

作用域附加到 dom 元素，所以如果你可以到达你的 modal 的根元素，你可以在它上面调用angular.element(node).scope()。范围对象应该具有您需要的方法。

【讨论】：

我可以使用 javascript 'parent' 对象访问 iframe 的父级。我附上了快照的链接，您可以在其中查看我为 iframe 的父级获取的内容。但我不知道如何通过它访问范围方法。
您将其包装在 angular.element() 调用中，然后在其上调用 scope()