logo标签列表

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

javascriptangularjs
12

我一直在尝试使用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}}"。

4个回答
7
我不确定这是否完全解决了你的问题，但我们在http://angular-ui.github.com/上有一个bootstrap modal的指令封装。因为你正在定义页面中的div，所以双向数据绑定应该可以正常工作。关于更改url链接，我不确定为什么你会想要这样做，因为这是一个模态控件。
Angular-ui团队提供了一组angularjs替代js的模态控件和其他bootstrap控件，请参考这里。
--dan
5
为什么不想直接在模态框中提供深链接？ Trello.com 这样做非常有用。 - Riko
模态框，就是模态框。根据我的经验，模态框是基于用户操作显示的。我知道一个用例，我也用过，那就是身份验证，即使在这种情况下，模态框也是基于用户进入未经身份验证的页面的操作而显示的。在狂野的网络世界中，标准变化得非常快。我会看一下Trello.com。 - Dan Doyon
6

Angular的方式是监视模型并更改模型：

  • 将对话框放入标记中。
  • 将对话框的内容绑定到类似于selectedPost的东西上。
  • 点击链接只会更改selectedPost并隐藏/显示对话框。

这是一个非常快速的版本：http://plnkr.co/edit/0fsRUp?p=preview

查看Angular UI，他们已经为Bootstrap的模态框提供了组件。

4
我认为你的 Plunkr 已经失效了。 - jcollum
4
如果你正在使用Twitter BootStrap的模态框，this jsfiddle可以将Angular组件分离，这样你就可以创建一个只包含模态框HTML和正确作用域绑定的部分HTML文件。
这意味着你可以在HTML中声明性地使用Angular指令：
 <a my-popup-directive="partials/myModal.html">Open MyModal</a>
编辑: 根据@DanDoyon的（正确）评论，该指令已重命名为非ng命名空间。 更新: 使用Bootstrap 3 modal与Angular 1.x一起使用几乎不需要自定义指令或angular-ui modal。
5
为了让读者清楚，ng-popup不是Angular指令。使用ng作为命名空间并不是错误的，但会暗示它来自核心库。 - Dan Doyon
1
我已经获取了这个版本并在其基础上进行开发：https://github.com/clouddueling/angularjs-modals - Michael J. Calkins
2
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接