Question

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

Answer 1

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

Angular-ui组有一个angularjs替换模态的js和其他一些bootstrap控件，请参阅here

- 丹

Answer 2

Angular方式是观看模型并更改模型的视图：

将对话框放入标记。
将对话框的内容绑定到selectedPost。
点击链接只会更改selectedPost并隐藏/显示对话框。

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

Checkout Angular UI，他们已经拥有Bootstrap模态的组件。

Answer 3

如果您正好使用Twitter BootStrap的模态，this jsfiddle会将Angular组件分开，这样您就可以创建仅包含模态的html和正确范围的绑定的部分html文件。

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

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

编辑：Per @ DanDoyon（正确）评论，该指令被重命名为非ng命名空间。更新：使用带有Angular 1.x的Bootstrap 3 modal会使自定义指令或angular-ui modal变得非常不必要。

Answer 4

这是我尝试为它制作指令。

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

希望你觉得它很有用。

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

4 个答案: