Блог

Главная - Вопросы по программированию - Динамически загружать части html в div

Динамически загружать части html в div

#html #angularjs #partials

#HTML #angularjs #части

Вопрос:

У меня есть веб-страница с двумя столбцами. В левом столбце я показываю кнопки. При нажатии на кнопку в правом столбце должна загружаться фрагмент HTML. Эту часть HTML можно рассматривать как «виджет».

Проблема в том, что я не уверен, как динамически загружать фрагмент HTML в правый столбец с помощью AngularJS.

Итак, у меня в основном есть эти макеты:

Моя главная страница:

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

Комментарии:

1. Я думаю, вам следует взглянуть на github.com/angular-ui/ui-router

2. @domakas Разве это не для тех случаев, когда вы хотите загрузить что-то в ng-view ? В моем случае страница уже загружена. Я просто хотел бы загружать дополнительные фрагменты меньшего размера внутри div , когда я нажимаю на определенную кнопку.

3. @Vivendi: no. ui-router делает еще один шаг вперед, позволяя представлениям иметь вложенные представления.

Ответ №1:

Я рекомендую вам использовать ng-include . В нем есть документация об этой части. Я думаю, что в нем есть именно то, что вы ищете. Вот ссылка на документацию об этом:

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