Modal
제가 작업하고 있는 프로젝트가
아니고 또 AngularJS를 사용하지 않는다고
해도 아래와 같은 모달창은 웹 페이지 작업
에서 많이 사용이 됩니다. 일회성 정보나
설정 값 입력 등의 작업을 화면에서 할 때
현재 화면에 이동이나 큰 변화 없이
별도의 창을 하나 띄워 그 창에서 작업을
완료하면 다시 창을 닫는 형태의 작업에서
이 Modal 창을 참 유용하죠~
AngularJS에서 모달창을 띄울 때
bootstrap 모듈을 이용해서 띄우고
있는데 모달창을 띄워야 되는 페이지의
html 파일에서 아래와 같이 모달 페이지에
해당하는 html의 경로를 ng-include를
이용해서 아래와 같이 입력합니다.
그리고 위에 경로를 입력해준
html의 컨트롤러에서 아래와 같이
해당 모달 창을 띄워 줍니다.
주석으로 처리되어 있는 이유는 위에
방법을 사용하지 않기 때문입니다.
이유는 지금부터 설명하겠습니다.
Modal로 파라미터 보내기
프로젝트를 해오면서 지금까지는 모달창에
보이는 내용은 모달 자체의 controller에서
처리한 값이나 박힌 값들로 구성이 되어
있었습니다. 그런데 이번에는 모달창을
호출했던 페이지에서 특정 값을 모달창으로
넘겨야 하는 경우가 생겼습니다.
일단 위에서 사용한 ng-include는 동일하게
사용합니다. 그리고 모달창을 띄우기 위한
태그에 angularjs에서 제공하는 ng-click으로
아래와 같이 search()라는 함수를
호출하게 했습니다.
위에 상황을 대략 설명 드리자면
컨트롤러에 있는 search 함수를
호출해서 모달창을 띄우려고 하는데
이 모달창으로 특정 값을 보내고
싶은데 그 값이 vm.page + $index
이 값입니다. 단순 정수 값인데
이 값을 알아야 모달창에 작업을
진행할 수 있습니다. 그리고 GET_SOURCE
값은 컨트롤러에서 분기를 위한 값입니다.
아래의 코드를 보시면 이해가 되실 겁니다.
if문에서 condition 값이 GET_SOURCE 인 경우
즉 지금 제가 하고 있는 작업이 저 else if 문에서
실행되는 겁니다. 안에 내용도 설명을 드리겠습니다.
내용은 두 줄이 전부입니다.
첫 번째 라이은 제가 필요로 하던 값(param)을
모달 창의 특정 태그에 set 하는 부분이고,
두 번째 라인은 그 modal창을 띄우는 부분입니다.
첫 번째 라인은 form-group이라는 값을
클래스로 갖는 태그에서 result_index라는
name 값을 가지는 태그에 param 변수에
담긴 값을 set 하라는 내용입니다.
모달 창에서 위에 값이 set 되는 부분은
아래와 같습니다.
그래서 결과는 아래와 같이 나왔습니다.
정말 간단한 숫자 값 하나이지만
저 하나를 얻기 위해 엄청난 시간을
허비했습니다. 몰라서...
방법을 가르켜준 다나양에게
다시 한 번 감사의 인사를...
꾸벅~
