Javascript 创建一个模态窗口以使用 AngularJS 加载数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11183414/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Creating a modal window to load data with AngularJS
提问by hilarl
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.
我一直在尝试使用 AngularJS 在模态窗口中加载数据，但我不知道该怎么做。我还需要在单击链接时更改 url，并将数据加载到模式窗口中，而不是加载新页面。
I have tried using the jQuery Facebox plugin but it doesnt seem to work, I'm also using the twitter bootstrap modal component.
我曾尝试使用 jQuery Facebox 插件，但它似乎不起作用，我也在使用 twitter bootstrap 模态组件。
Below is my code:
下面是我的代码：
<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>
I want to load the "#/posts/{{post.id}}"in a modal window.
我想"#/posts/{{post.id}}"在模态窗口中加载。
回答by Dan Doyon
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.
不确定这是否能完全解决您的问题，但我们在http://angular-ui.github.com/上有一个引导模式的指令包装器。因为您是在页面中定义 div，所以双向数据绑定应该可以正常工作。关于要更改的 url 链接，我不确定您为什么要这样做，因为这是一个模态控件。
Angular-ui group has an angularjs replacement of the js for modal and some other bootstrap controls see here
Angular-ui 组有一个 angularjs 替换了模态和其他一些引导控件的 js，请参见此处
--dan
- 担
回答by Vojta
The Angular way is view watching the model and you changing the model:
Angular 的方式是查看模型并更改模型：
- Put the dialog into the markup.
- Bind content of the dialog to something like
selectedPost. - Clicking the link only change
selectedPostand hide/show the dialog.
- 将对话框放入标记中。
- 将对话框的内容绑定到类似
selectedPost. - 单击链接只会更改
selectedPost和隐藏/显示对话框。
Here is a very quick version: http://plnkr.co/edit/0fsRUp?p=preview
这是一个非常快速的版本：http: //plnkr.co/edit/0fsRUp?p=preview
Checkout Angular UI, they already have a component for Bootstrap's modal.
Checkout Angular UI，他们已经有一个用于 Bootstrap 模态的组件。
回答by JJ Zabkar
If you happen to be using Twitter BootStrap's modal, this jsfiddlekeeps the Angular components separate, which allows you to create a partial html file with only your modal's html and properly scoped bindings.
如果您碰巧使用Twitter BootStrap的模态，则此 jsfiddle将 Angular 组件保持分离，这允许您创建仅包含模态 html 和适当范围绑定的部分 html 文件。
This means you can use an Angular directivedeclaratively in your html:
这意味着您可以在 html 中声明性地使用Angular 指令：
<a my-popup-directive="partials/myModal.html">Open MyModal</a>
Edit: Per @DanDoyon's (correct) comment, the directive was renamed to a non-ngnamespace.
Update: Using a Bootstrap 3 modalwith Angular 1.x makes a custom directive or angular-ui modalpretty much unnecessary.
编辑：根据@DanDoyon 的（正确）评论，该指令已重命名为非ng命名空间。
更新：在 Angular 1.x 中使用Bootstrap 3 模态几乎不需要自定义指令或angular-ui 模态。
回答by testing123
Here's my attempt to make directives for it.
这是我为它制定指令的尝试。
http://jsfiddle.net/tadchristiansen/gt92r/
http://jsfiddle.net/tadchristiansen/gt92r/
Hopefully you find it useful.
希望你觉得它有用。
