AngularJS) 별도의 파일로 팝업 작성하기(RequireJS, jQuery Dialog 사용)

 팝업에 보여질 html, js의 파일명이 아래와 같을 때, 다음과 같이 다이얼로그를 실행시킬 수 있다.

• sample.html
• resources/js/sample.js

<button type="button">Open</button>
<div id="dial" style="display: none;"></div>

<script>
	function openDial() {
        require.undef("resources/js/sample.js");
        const dial = $("#dial").load("sample.html");
        .dialog({
        	...,
            beforeClose: function() {
            	require.undef("resources/js/sample.js");
            }
        });
    }
</script>

 

 jQuery의 load() 함수를 통해 html을 로드해와서 이것을 dialog() 함수를 통해 다이얼로그로 열 수 있다. 이 때 관련 js 파일이 함께 로드되도록 하기 위해 해당 함수(openDial)가 실행될 때마다 requireJS의 undef() 함수로 js 파일을 초기화시켜준다. 팝업을 닫을 때 해당 js 파일을 초기화시켜주기 위해 jQuery Dialog에서 제공하는 beforeClose() 함수 내부에 초기화시켜주는 코드를 추가한다.