创建一个模态窗口以使用AngularJS加载数据 [英] Creating a modal window to load data with AngularJS
问题描述
我一直在尝试使用AngularJS在模态窗口中加载数据,但我不知道该怎么做。我还需要在点击链接时更改URL以及在模态窗口内加载数据而不是加载新页面。
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.
我尝试过使用jQuery Facebox插件但它似乎没有用,我也使用twitter bootstrap模态组件。
I have tried using the jQuery Facebox plugin but it doesnt seem to work, I'm also using the twitter bootstrap modal component.
以下是我的代码:
<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在模态窗口中
。
推荐答案
不确定这是否能彻底解决您的问题但是我们在 http://angular-ui.github.com/ 上有一个bootstrap模式的指令包装器。因为您在页面中定义了div,所以双向数据绑定应该可以正常工作。关于要更改的url链接,我不确定为什么你会想要这个,因为这是一个模态控件。
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.
Angular-ui组有一个angularjs替换模态的js和其他一些bootstrap控件看这里
Angular-ui group has an angularjs replacement of the js for modal and some other bootstrap controls see here
- dan
这篇关于创建一个模态窗口以使用AngularJS加载数据的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!