0

I have a web page with two columns. In the left column I show buttons. When pressed on a button then a HTML partial should be loaded in the right column. That HTML partial can be seen as a "widget".

The problem is that I'm not sure how to load the HTML partial in the right column dynamically with AngularJS.

So I basically have these layouts:

My main page:

<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>

My partials:

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>

So I'd like to load the partials in the selected-widgets div. How can I do this with AngularJS?

Vivendi
  • 20,047
  • 25
  • 121
  • 196
  • I think you should take a look at https://github.com/angular-ui/ui-router – domakas Jul 07 '14 at 08:02
  • @domakas Isnt that for when you want to load something in a `ng-view`? The page is already loaded in my case. I'd just like to load additional smaller partials inside a `div` when I press on a certain button. – Vivendi Jul 07 '14 at 08:04
  • @Vivendi: no. ui-router goes one step further by allowing views to have sub-views. – JB Nizet Jul 07 '14 at 08:14

1 Answers1

0

I recommend you use ng-include. It has check out the documentation about this part. I think it has exactly what you are looking for. Here is a reference to the documentation about it:

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

Facyo Kouch
  • 787
  • 8
  • 26