div에서 동적으로 HTML 부분을로드하십시오.

Question

두 개의 열이있는 웹 페이지가 있습니다. 왼쪽 열에는 버튼이 표시됩니다. 버튼을 누르면 HTML 부분이 오른쪽 열에로드되어야합니다. 그 HTML 부분은 "위젯"으로 볼 수 있습니다.

문제는 AngularJS를 사용하여 동적으로 오른쪽 열에 HTML 부분을로드하는 방법을 잘 모르겠다는 것입니다.

내 주요 페이지 :

<div class="left-col"> 
    <button>Widget 1</button> 
    <button>Widget 2</button> 
</div> 
<div class="right-col"> 
    <div class="selected-widgets"> 
    <!-- dynamic partial HTML will be loaded here --> 
    </div> 
</div> 

내 파셜 :

Widget1_Partial.html

<div> 
    <h2>Widget 1</h2> 
    <input name="width" value=""> 
    <input name="height" value=""> 
</div> 

Widget2_Partial.html

그래서 나는 기본적으로 이러한 레이아웃을 가지고

<div> 
    <h2>Widget 2</h2> 
    <input name="size" value=""> 
</div> 

그래서 selected-widgets div에 부분을로드하고 싶습니다. AngularJS로 어떻게 할 수 있습니까?

Answer 1

나는 ng-include을 사용하는 것이 좋습니다. 이 부분에 대한 문서를 확인하십시오. 나는 그것이 당신이 찾고있는 것과 정확히 같다고 생각합니다. 여기 그것에 대해 문서에 대한 참조 :

https://docs.angularjs.org/api/ng/directive/ngInclude