안드로이드 Native에서 Angular JS로 구현된 웹페이지를 보여주는 WebView에 값을 전달하는 방법

지난 예제 안드로이드 Native와 WebView 연동 (3) (http://zeany.net/14)에서 일반 웹페이지를 대상으로 안드로이드 Native에서 값을 넘겨주는 것을 설명했습니다.

하지만, 만약 웹페이지가 Angular JS(https://angularjs.org/) Framework를 사용하여 개발된 페이지라면 정상 동작하지 않습니다. 

왜냐하면, Angular JS는 Model과 View가 분리되어 있어서 html 파일이 사실은 template 파일일 뿐이기 때문에, DOM으로 접근하여 값을 변경하게 되면 단순히 눈에 보이는 (View) 값은 변경이 되지만, Model (해당 Controller의 $scope 내의 특정 변수)의 값은 변경되지 않기 때문입니다. (값을 Native로 가져오는 코드는 정상적으로 동작합니다.)

해결 방법은 angular 객체 내부의 값들을 추적해서 해당 Model의 값을 변경 후 다시 View에 적용하도록 하면 됩니다.

다음은 지난 예제에서 웹페이지의 TextField에 값을 넘겨주는 WebViewClient의 onPageFinished() 메소드의 코드입니다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14

@Override public void onPageFinished(WebView view, String url) { if (url.equals(ENTRY_URL)) { String keyword = "keyword"; String script = "javascript:function afterLoad() {" + "document.getElementById('keyword').value = '" + keyword + "';" + "document.forms[0].setAttribute('onsubmit', 'window.Zeany.justDoIt(elements[0].value); return true;');" + "};" + "afterLoad();"; view.loadUrl(script); } }

여기서 실제 값을 변경하는 (DOM을 조작하는) 코드는 다음과 같습니다.

1	+ "document.getElementById('keyword').value = '" + keyword + "';"

Angular JS를 이용한 페이지라면 이 부분을 다음처럼 수정하면 됩니다.

1 2 3 4

+ "var inputKeyword = angular.element(document.getElementById('keyword'));" + "var modelKeyword = inputKeyword.controller('ngModel');" + "modelKeyword.$setViewValue('" + keyword + "');" + "modelKeyword.$render();"

Angular JS를 이용한 HTML 페이지의 예는 생략합니다.