Angular — Как передать данные из всплывающего окна в элемент в родительском приложении angular

Я работаю над приложением, которое использует angular и должно позволять пользователям извлекать данные из API USPS для проверки / стандартизации адресов и извлечения zip4. На родительской странице я использую функцию window.open, чтобы открыть всплывающее окно …

Всплывающая страница (getAddress.php):

$ value = $ _GET [‘value’]; эхо-сигнала ( »);

            $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, а элементы внутри повторителя не могут иметь идентификаторы, я не могу получить данные. Я выполнил тест и смог получить строку $ 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  -->

Мне нужно, чтобы данные помещались в повторитель внутри директивы, которая создает теги адрес-данные, которые я создал.

Как вы можете видеть, я попытался добавить идентификатор к тегу address-data для ссылки на него, но я застрял на том, как проникнуть внутрь функциональности address-data.

ПЫТАЛСЯ:

$(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-address»). address [myID] = myJSON;

window.close ();

создать объект с ключами, которые соответствуют директиве, которая создает теги address-data. Но это не работает. Я новый, изо всех сил разработчик и был бы признателен за любую помощь.

ЦЕЛЬ:
Пользователи будут редактировать данные, извлекаемые из базы данных, или создавать новые записи адресов. Новые записи адресов требуют zip4, но я хотел бы предоставить пользователям возможность стандартизировать адрес перед сохранением в базе данных.
Спасибо за вашу помощь.

0

Решение

Вы можете получить $scope такого элемента: angular.element('your-selector').scope()

Итак, в вашем случае вы бы сделали:

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

Если у вас есть объект области действия, вы можете делать с ним все, что захотите. Не зная ничего о том, как настраивается ваша область, вы, вероятно, можете сделать что-то вроде этого:

addressScope.addresses = myJSON
0

Другие решения

Других решений пока нет …

По вопросам рекламы [email protected]