AngularJS 부트스트랩(bootstrap) 모달(Modal) 창 예제

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 되는 부분은

아래와 같습니다.

그래서 결과는 아래와 같이 나왔습니다.

정말 간단한 숫자 값 하나이지만

저 하나를 얻기 위해 엄청난 시간을

허비했습니다. 몰라서...

방법을 가르켜준 다나양에게

다시 한 번 감사의 인사를...

꾸벅~