ajaxzip3は、郵便番号を入力するだけで自動で住所を表示してくれる機能です。google codeが終了し、githubでの運用に変わったので、古いコードは修正が必要です。
angularJS + ajaxZip3の注意事項
Angular JSを使っていても、ajaxZip3は動作しますが、１点だけ問題があります。
郵便番号を入力して、住所が自動で代入されても、angular js側で住所の値がセットされたことを検知してくれないことです。
住所の後ろに番地などを入力すれば、問題なく反映されてきますが、何らかの変更を加えない限り$scope上の住所は空欄のままということになります。
<input type="text" ng-model="zip" ng-maxlength="8" name="zip11" onKeyUp="AjaxZip3.zip2addr(this,'','addr11','addr11');"> <input type="text" id="trg" name="addr11" ng-model="addr" ng-maxlength="32">
郵便番号のフォーム(zip11)が変わると、onKeyUpのイベントが発生します。そして郵便番号に対応する住所がaddr11に代入されます。
何故バインドされないのか？
AngularJSは双方向データバインドという仕組みで動作していますが、外部から書き換えられた値（例えばajaxZip3から書き換えられた値等)はデータバインディングされず、フォーム上の値とscopeの値にズレが生じてしまいます。フォームの画面上は住所が入っているのに、バインドされているscopeは変わる前（空欄）のままということになってしまいます。
外部からのイベントを検知する仕組み
$applyを使うことで強制的にバインドさせることができます。
var update = function() {
var target = document.getElementById("trg");
$log.info(target.value);
$scope.addr = target.value;
};
update();
setInterval(function() {
$scope.$apply(update);
}, 1000);
この例では、1秒ごとにテキストボックス(addr11)の値を取得し、$scope.addrに代入しています。
他に良いやり方があるのかわかりませんが、とりあえずこれで動きました。
しかし、フレームワークを使うのが当たり前のJavaScriptで、document.getElementByIdなんて久しぶりに使いました。
