12

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

我曾尝试使用 jQuery Facebox 插件，但它似乎不起作用，我也在使用 twitter 引导模式组件。

下面是我的代码：

<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

4 回答 4

7

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

Angular-ui 组有一个 angularjs 替换模态的 js 和其他一些引导控件，请参见此处

- 担

于 2012-07-26T21:07:46.887 回答
6

Angular 方式是查看模型并更改模型：

  • 将对话框放入标记中。
  • 将对话框的内容绑定到类似selectedPost.
  • 单击链接只会更改selectedPost和隐藏/显示对话框。

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

Checkout Angular UI，他们已经有一个用于 Bootstrap 模式的组件。

于 2012-08-03T01:00:12.190 回答
4

如果你碰巧使用Twitter BootStrap的模态，这个 jsfiddle将 Angular 组件分开，它允许你创建一个只有模态的 html 和适当范围绑定的部分 html 文件。

这意味着您可以在 html 中以声明方式使用Angular 指令：

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

编辑：根据@DanDoyon 的（正确）评论，该指令被重命名为非ng命名空间。 更新：使用带有 Angular 1.x的Bootstrap 3 模态使得自定义指令或angular-ui 模态几乎没有必要。

于 2012-10-31T22:50:32.337 回答
2

这是我为它制定指令的尝试。

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

希望你觉得它有用。

于 2012-08-18T05:20:47.540 回答