2015-02-06 40 views
0

我正在研究使用angular的應用程序,並且必須允許用戶從USPS API中檢索數據以進行地址驗證/標準化和zip4檢索。在父頁面,我使用window.open功能打開彈出窗口...Angular - 如何將數據從彈出窗口傳遞到角度應用程序父項中的元素

彈出頁面(getAddress.php):

$值= $ _GET [ '值'];回聲('');

  $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(); 
    }) 
}) 

但現在,因爲我使用的角度,和中繼器內的元素不能有ID,我無法獲取數據。我做了一個測試,能夠將$ sxe字符串放入localStorage中,它看起來不錯,但我知道必須有一種方法來訪問父元素。

HTML頁面:

引用jQuery的,棱角分明,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.opener $( 「#MEM-地址」)地址[本身份識別碼= myJSON;

window.close();

使用與創建地址數據標籤的指令相匹配的鍵創建對象。但它不起作用。我是一個新的,掙扎的開發人員,並希望得到任何幫助。

目標: 用戶將編輯從數據庫中提取的數據或創建新的地址記錄。新的地址記錄需要zip4,但我希望允許用戶選擇標準化地址,然後再堅持數據庫。 感謝您的幫助。

回答

0

你可以得到這樣一個元素的$scopeangular.element('your-selector').scope()

所以,你的情況,你會怎麼做:

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

一旦你的範圍對象,你可以做任何你想要的用它。不知道你的示波器的設置方式,你可以這樣做:

addressScope.addresses = myJSON 
相關問題