Angular-如何将数据从弹出窗口传递到Angular应用程序父级中的元素


Angular - How to pass data from a pop up to element in angular app parent

我正在开发一个使用angular的应用程序,该应用程序必须允许用户从USPS api中检索数据,以进行地址验证/标准化和zip4检索。在父页面中,我使用window.open功能打开弹出窗口。。。

弹出页面(getAddress.php):

$value=$_GET['value'];echo('');

            $url = 'http://production.shippingapis.com/ShippingAPI.dll?API=Verify&XML=';
            $msg = '<AddressValidateRequest USERID="xxxxxxxx" PASSWORD="">';  
            $msg .= '<Address ID="0"><Address1>';
            $msg .= $_GET['address1'];
            $msg .= '</Address1><Address2>';
            $msg .= $_GET['address2'];
            $msg .= '</Address2><City>';
            $msg .= $_GET['city'];
            $msg .= '</City><State>';
            $msg .= $_GET['state'];
            $msg .= '</State><Zip5>';
            $msg .= $_GET['zip'];
            $msg .= '</Zip5><Zip4></Zip4></Address></AddressValidateRequest>';
        //get the response from the USPS
        $newurl = $url . urlencode($msg);
        $xml = $newurl;
        $parser = xml_parser_create();
        // open a file and read data
        $fp = fopen($xml, 'r');
        $xmldata = fread($fp, 4096);

        $xml_xmldata = new DOMDocument;
        $xml_xmldata->loadXML($xmldata);
        $sxe = simplexml_import_dom($xml_xmldata);
        if((!$sxe->Address[0]->Error)&&(!$sxe->Address[1]))
        {           
        $i=0;

这个页面可以很好地检索我们需要的数据。如果找不到地址,它会弹出匹配的地址或来自邮政服务的错误消息。。。。

         echo '<div>Address Found</div>';
        echo '<div id="usps_addresses">';
        foreach($sxe as $nodes){
        echo '<p><span id="address1_'.$i.'">'.ucwords(strtolower($sxe->Address[$i]->Address1)).'</span><span id="address2_'.$i.'">'.ucwords(strtolower($sxe->Address[$i]->Address2));
        echo '</span><span id="city_'.$i.'">'.ucwords(strtolower($sxe->Address[$i]->City)).'</span><span id="state_'.$i.'">'.$sxe->Address[$i]->State;
        echo '</span><zip5 id="zip5_'.$i.'">'.$sxe->Address[$i]->Zip5.'</zip5>-<zip4 id="zip4_'.$i.'">'.$sxe->Address[$i]->Zip4.'</zip4>&nbsp;&nbsp;';
        echo '<a href="" id="'.$i.'">SELECT</a>';
        echo '</p>';
         $i++;
         }
         if($sxe->Address[0]->ReturnText){
         echo $sxe->Address[0]->ReturnText;
         }
         }
         else{
            echo 'Error occurred.<br/><br/>';
            echo $sxe->Address[0]->Error[0]->Description;
         }
         echo '</div>';
        echo '</body></html>'

如果找到了正确的地址,用户单击SELECT链接,地址数据将被放置在父窗口中。。。。我有一个锚的点击事件处理程序,它有以下内容:

$(document).ready(function () {
    $("a").click(function () {
        var myID = this.id;
        var addressType = document.getElementById("type").value;
        //alert(addressType);
        var myAddress1 = document.getElementById("address1_" + myID).innerHTML;
        var myAddress2 = document.getElementById("address2_" + myID).innerHTML;
        var myCity = document.getElementById("city_" + myID).innerHTML;
        var myState = document.getElementById("state_" + myID).innerHTML;
        var myZip5 = document.getElementById("zip5_" + myID).innerHTML;
        var myZip4 = document.getElementById("zip4_" + myID).innerHTML;
        window.opener.$("#mem-address").address.addresses[myID].zip4 = myZip4;
          window.opener.$scope.address.addresses[myID].zip4 = myZip4;      
        window.opener.$("#Address1_"+addressType).val(myAddress1).removeClass('error');
        window.opener.$("#Address2_"+addressType).val(myAddress2).removeClass('error');
        window.opener.$("#City_"+addressType).val(myCity).removeClass('error');
        window.opener.$("#State_"+addressType).val(myState).removeClass('error');
        window.opener.$("#Zip5_"+addressType).val(myZip5).removeClass('error');           
        window.opener.$("#Zip4_"+addressType).val(myZip4).removeClass('error');

      window.close();
    })
})

但现在,因为我使用的是angular,中继器内的元素不能有id,所以我无法获得数据。我做了一个测试,能够将$sxe字符串放入localStorage,它看起来很棒,但我知道必须有一种方法来访问父元素。

HTML页面:

对jquery、angular、css的引用。。。所有这些

    <div ng-hide='foundMember'>
    <button type='button' ng-click='addMember()'>Add Member</button><button type='button' ng-click='clearMember()'>Clear Member</button>
</div>
    <div>
        <member-lookup ></member-lookup>
        <label>Edit Mode:</label>
        <select ng-model='editMode'
                ng-options='mode.label for mode in modes'></select>
    </div>
    <div class='col-md-4'>
        <member-data ></member-data>
    </div>      

    <div class='col-md-4'>          
            <address-data id='mem-address'></address-data>          
        <hr>            
            <phone-data></phone-data>           
        </div>
    <div class='col-md-4'>          
            <email-data></email-data>
    <hr>        
            <beneficiary-data></beneficiary-data>           
    </div>
</div> <!-- End of content  -->

我需要数据进入创建我创建的地址数据标签的指令中的中继器。

正如你所看到的,我试图向地址数据标签添加一个id来引用它,但我被困在如何进入地址数据的功能上。

已尝试:

$(document).ready(function () {
    $("a").click(function () {
        var myID = this.id;
        //
        var addressType = document.getElementById("type").value;
        //alert(addressType);
        var myAddress1 = document.getElementById("address1_" + myID).innerHTML;
        var myAddress2 = document.getElementById("address2_" + myID).innerHTML;
        var myCity = document.getElementById("city_" + myID).innerHTML;
        var myState = document.getElementById("state_" + myID).innerHTML;
        var myZip5 = document.getElementById("zip5_" + myID).innerHTML;
        var myZip4 = document.getElementById("zip4_" + myID).innerHTML;
        var myJSON = [{address1:myAddress1,address2:myAddress2,city:myCity,state:myState,zip5:myZip5,zip4:myZip4}];

window.oopener.$("#mem-address").addresss[myID]=myJSON;

window.close();

以创建一个具有与创建地址数据标记的指令匹配的键的对象。但它不起作用。我是一个新的,苦苦挣扎的开发人员,如果有任何帮助,我将不胜感激。

目标:用户将编辑从数据库中提取的数据,或创建新的地址记录。新的地址记录需要zip4,但我希望允许用户在持久化到数据库之前选择标准化地址。谢谢你的帮助。

您可以获得如下元素的$scopeangular.element('your-selector').scope()

所以,在你的情况下,你会这样做:

var addressScope = angular.element(window.opener.$("#mem-address")).scope();

一旦你有了scope对象,你就可以用它做任何你想做的事情。在不知道你的scope是如何设置的情况下,你可能会做这样的事情:

addressScope.addresses = myJSON