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