我正在开发一个使用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> ';
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,但我希望允许用户在持久化到数据库之前选择标准化地址。谢谢你的帮助。
您可以获得如下元素的$scope
:angular.element('your-selector').scope()
所以,在你的情况下,你会这样做:
var addressScope = angular.element(window.opener.$("#mem-address")).scope();
一旦你有了scope对象,你就可以用它做任何你想做的事情。在不知道你的scope是如何设置的情况下,你可能会做这样的事情:
addressScope.addresses = myJSON