Creating a modal window to load data with AngularJS

Question

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 loa

Answer 1

The Angular way is view watching the model and you changing the model:

• Put the dialog into the markup.
• Bind content of the dialog to something like selectedPost.
• Clicking the link only change selectedPost and hide/show the dialog.

Here is a very quick version: http://plnkr.co/edit/0fsRUp?p=preview

Checkout Angular UI, they already have a component for Bootstrap's modal.

Answer 2

Here's my attempt to make directives for it.

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

Hopefully you find it useful.

Answer 3

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 group has an angularjs replacement of the js for modal and some other bootstrap controls see here

--dan

Answer 4

If you happen to be using Twitter BootStrap's modal, this jsfiddle keeps the Angular components separate, which allows you to create a partial html file with only your modal's html and properly scoped bindings.

This means you can use an Angular directive declaratively in your html:

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

Edit: Per @DanDoyon's (correct) comment, the directive was renamed to a non-ng namespace. Update: Using a Bootstrap 3 modal with Angular 1.x makes a custom directive or angular-ui modal pretty much unnecessary.