Создание модального окна для загрузки данных с помощью AngularJS

Я пытаюсь загрузить данные внутри модального окна с помощью AngularJS, но я не уверен, как это сделать. Мне нужно, чтобы URL-адрес также менялся при щелчке ссылки и данных для загрузки внутри модального окна вместо загрузки новой страницы.

Я пробовал использовать плагин jQuery Facebox, но он, похоже, не работает, я также использую мотальный компонент twitter bootstrap.

Ниже мой код:

<div class="subnav span12" id="post-main-container" ng-controller="PostsController">
  <div class="btn-group pull-left span5" id="sort-nav">
    <a class="btn active">Popular</a>
    <a class="btn">Recent</a>
    <a class="btn">Favorite</a>
  </div>
  <div class="btn-group pull-right " id="view-nav">
    <a class="btn" id="2col"><i class="icon-th-large"></i></a>
    <a class="btn active" id="4col"><i class="icon-th"></i></a>
    <a class="btn" id="6col"><i class="icon-th-list"></i></a>
  </div>
  <div class="btn-group pull-right">
    <a id="reload" class="btn"><i class="icon-refresh"></i></a>
    <a class="btn"><i class="icon-random"></i></a>
  </div>
  <div class="row-fluid span12" id="img-container">
    <ul class="unstyled" id="image-container">
      <li class="post-container box2" ng-repeat="post in posts">
        <div class="post-btns" style="display:none;">
          <a class="btn btn-mini" href="#">Share</a>
          <a class="btn btn-mini" href="#">Add</a>
        </div>
        <a href="#/posts/{{post.id}}">
          <img ng-src="{{post.image}}">
        </a>
        <p class="post-snippet" style="display:none;">{{post.description}}</p>
      </li>
    </ul>
  </div>
</div>

Я хочу загрузить "#/posts/{{post.id}}" в модальное окно.

Ответы

Ответ 1

Не уверен, что это полностью решит вашу проблему, но у нас есть директивная оболочка загрузочного модала на http://angular-ui.github.com/. Поскольку вы определяете свои div на своей странице, нужно просто работать с двусторонней привязкой данных. Что касается ссылки url для изменения, я не уверен, почему вы хотели бы этого, так как это модальный контроль.

Angular -ui group имеет замену js для замещения js для модальных и некоторых других элементов управления bootstrap, см. здесь

- дан

Ответ 2

Angular способ просмотра модели и изменения модели:

  • Поместите диалог в разметку.
  • Свяжите содержимое диалогового окна с чем-то вроде selectedPost.
  • При нажатии на ссылку только selectedPost и скрыть/показать диалог.

Вот очень быстрая версия: http://plnkr.co/edit/0fsRUp?p=preview

Оформить заказ Angular пользовательский интерфейс, у них уже есть компонент для Bootstrap modal.

Ответ 3

Если вы используете Twitter BootStrap, this jsfiddle разделяет компоненты Angular, что позволяет вам создать частичный html файл только с вашими модальными html и привязанными к ним привязанными областями.

Это означает, что вы можете использовать Angular директиву декларативно в своем html:

 <a my-popup-directive="partials/myModal.html">Open MyModal</a>

Изменить. По комментарию @DanDoyon (правильный) директива была переименована в пространство имен ng. Обновление. Используя Bootstrap 3 modal с Angular 1.x создает настраиваемую директиву или angular -ui modal довольно ненужно.