使用AngularJS创建加载数据的模态窗口

I've been trying to load data inside a modal window using AngularJS but I'm not sure how to do that. I need the url also to change when the link is clicked and the data to load inside a modal window instead of loading a new page.

我一直在尝试使用AngularJS在一个模态窗口中加载数据，但我不知道该怎么做。我还需要在单击链接时更改url，并在模态窗口中加载数据，而不是加载新页面。

I have tried using the jQuery Facebox plugin but it doesnt seem to work, I'm also using the twitter bootstrap modal component.

我尝试过使用jQuery的Facebox插件，但它似乎并不起作用，我还使用了twitter的bootstrap模式组件。

Below is my code:

下面是我的代码:

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

I want to load the "#/posts/{{post.id}}" in a modal window.

我想载入“#/posts/{帖子”。在一个模式窗口中。

4 个解决方案

#1

Not sure if this will completely solve your problem but we have a directive wrapper of the bootstrap modal on http://angular-ui.github.com/. Because you are defining your divs in your page, the two-way data binding should just work. In regards to the url link to change, I'm not sure why you would want this since this is a modal control.

不确定这是否能完全解决您的问题，但是我们在http://angular-ui.github.com/上有一个引导包装器。因为您正在页面中定义div，所以双向数据绑定应该可以工作。关于要更改的url链接，我不确定为什么要这样做，因为这是一个模态控件。

Angular-ui group has an angularjs replacement of the js for modal and some other bootstrap controls see here

Angular-ui组对js替换为modal和其他一些引导控件，见这里

--dan

——丹

#2

The Angular way is view watching the model and you changing the model:

角度的方式是观察模型你改变模型

Put the dialog into the markup.
将对话框放入标记中。
Bind content of the dialog to something like selectedPost.
将对话框的内容绑定到selectedPost。
Clicking the link only change selectedPost and hide/show the dialog.
单击链接只更改selectedPost并隐藏/显示对话框。

Here is a very quick version: http://plnkr.co/edit/0fsRUp?p=preview

这里有一个非常快速的版本:http://plnkr.co/edit/0fsrup?

Checkout Angular UI, they already have a component for Bootstrap's modal.

检查角度UI，他们已经有了一个引导模式的组件。

#3

If you happen to be using Twitter BootStrap's modal, this jsfiddle keeps the Angular components separate, which allows you to create a partial html file with only your modal's html and properly scoped bindings.

如果您碰巧正在使用Twitter BootStrap的模式，这个jsfiddle将角组件分离开来，这允许您仅使用模式的html和适当的范围绑定创建一个部分html文件。

This means you can use an Angular directive declaratively in your html:

这意味着您可以在html中声明地使用角指令:

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

Edit: Per @DanDoyon's (correct) comment, the directive was renamed to a non-ng namespace. Update: Using a Bootstrap 3 modal with Angular 1.x makes a custom directive or angular-ui modal pretty much unnecessary.

编辑:根据@DanDoyon(正确)的注释，该指令被重命名为非ng名称空间。更新:使用带角1的引导3模式。x使得定制指令或angular-ui模式几乎没有必要。

#4

Here's my attempt to make directives for it.

这是我对它的指示。

http://jsfiddle.net/tadchristiansen/gt92r/

Hopefully you find it useful.

希望你觉得它有用。

#1